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

Добрый день.

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

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

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


Я до этого никогда не работал с картами, но немного погуглив и почитав вопросы тут понял, что нужно смотреть в сторону openlayers, однако насчет меток ничего не нашел и буду весьма признателен если вы дадите вектор куда смотреть.
  • Вопрос задан
  • 7890 просмотров
Решения вопроса 2
anmipo
@anmipo
Leaflet.js полегче (31 КБ) и проще в освоении, чем OpenLayers.
Пример «OSM карта + маркер + попап» приведён прямо на главной и занимает десять строк вместе с комментариями.
Ответ написан
ghaiklor
@ghaiklor
NodeJS TechLead
Вам нужно смотреть на такие вещи как 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 есть вот такое дело. В этом направлении и нужно копать.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
ЭЛКОМ+ Санкт-Петербург
от 90 000 до 130 000 руб.
RENEWAL Новосибирск
от 40 000 руб.
Avtoapp Москва
До 200 000 руб.