Kак ставить маркеры на OSM у себя на сайте?

Question

[rechmp]

Добрый день.

Название, возможно, не полностью описывает суть вопроса, попробую изложить подробнее ниже.

Я хотел бы у себя на сайте сделать страничку наподобие этой.

То есть, osm карта, а на ней метки, координаты, названия и данные при раскрытии которых берутся из своей же бд.


Я до этого никогда не работал с картами, но немного погуглив и почитав вопросы тут понял, что нужно смотреть в сторону openlayers, однако насчет меток ничего не нашел и буду весьма признателен если вы дадите вектор куда смотреть.

Answer 1

[anmipo]

Leaflet.js полегче (31 КБ) и проще в освоении, чем OpenLayers.
Пример «OSM карта + маркер + попап» приведён прямо на главной и занимает десять строк вместе с комментариями.

Comments

[Eugene Obrezkov]

+ вам, потому что полностью с вами согласен. Но так сложилось, что проект я поддерживаю на стареньком OpenLayers, поэтому посоветовать то, с чем реально столкнулся, могу только по OpenLayers :)
P.S. При возможности буду переходить на Leaflet, но также интересует что случилось с фондом для OpenLayers 3? Что вообще с третьей версией происходит сейчас?

[rechmp]

Спасибо большое, выглядит очень привлекательно!

[alex_denkin]

А русский поддерживает?

[anmipo]

alex_denkin, так вроде уже 20 лет как в XXI веке живём — Юникод уже везде. К тому же, автора библиотеки зовут Владимир Агафонкин, что как бы намекает...

[alex_denkin]

anmipo, спасибо))) установил у себя на сайте. отличное решение

Answer 2

[Eugene Obrezkov]

Вам нужно смотреть на такие вещи как OpenLayers.Marker или OpenLayers.Feature.Vector. Чтобы создать маркер с такими-то координатами, я использую вот такой код:

addVehicle: function (layerName, coordinates, attributes) {
        attributes = this.parent.BaseFunc.extendConfigFromDefault(attributes, defaultOptions.vehicleOptions);
        var layer = this.parent.Layer.getLayerByName(layerName);
        if (this.parent.BaseFunc.checkUndefined(layer) || !layer) {
            this.parent.Console.writeError('Func: addVehicle | Layer ' + layerName + ' doesn\'t exists!');
            return false;
        }
        var feature = this.parent.Layer.getFeatureById(layerName, attributes.id);
        if (!this.parent.BaseFunc.checkUndefined(feature) || feature) {
            this.parent.Console.writeWarning('Func: addVehicle | Layer ' + layerName + ' already have feature with this ID: ' + attributes.id + '!');
            return false;
        }
        var point = new OpenLayers.Geometry.Point(coordinates.longitude, coordinates.latitude);
        point.transform(new OpenLayers.Projection(attributes.projection), new OpenLayers.Projection(this.parent.Map.getProjectionObject()));
        layer.addFeatures(new OpenLayers.Feature.Vector(point, attributes));
        return true;
    }

Так же можете почитать вот эту статью. Было время, когда мне нужно было упростить такие шаблонные участки и я написал это мини-плагин.

В документации OpenLayers есть вот такое дело. В этом направлении и нужно копать.

Comments

[rechmp]

Спасибо, похоже на то — что нужно.