Добавление маркеров из базы данных SQL в OSM - PullRequest
Новая
       18

Добавление маркеров из базы данных SQL в OSM

1 голос
/ 15 октября 2010

Я новичок в OpenStreetMap, и я просматривал вики и сеть, и я не могу найти учебник в любом месте, но я видел примеры в сети.

По сути, я хочу сгенерировать свой собственный OpenStreetmap и нанести маркеры на основе широты и долготы из базы данных MySQL и нанести их на свою карту.Когда пользователь нажимает на отметку, я хотел бы иметь всплывающее окно.В основном я хочу это http://code.google.com/apis/maps/articles/phpsqlajax.html, но для OpenStreetMap, а не для Google-карт.

Ответы [ 3 ]

3 голосов
/ 18 октября 2010

Для этого вам нужно выяснить javascript для представления маркеров на интерфейсе «скользкой карты».

OpenLayers - это название популярной библиотеки javascript.Это бесплатно и с открытым исходным кодом.Он используется для отображения скользкой карты на домашней странице OpenStreetMap.org и на других сайтах в Интернете.Это часто путают с самим OpenStreetMap, или у людей по ошибке создается впечатление, что вы должны использовать OpenLayers, если вы хотите встроить карты OpenStreetMap на свой сайт.Не правда.Существует множество альтернативных библиотек javascript для отображения скользкой карты

... включая API Google Maps!Вы можете настроить отображение карт Google, но показывать изображения «плитки» OpenStreetMap вместо плиток Google.См. Пример Google Maps .Это дает преимущество совместимости кода, то есть вы можете следовать учебному пособию по Google Maps, которое вы там указали, но затем добавить дерзкий кусочек кода, чтобы указать OpenStreetMap в качестве слоя листов.

Это имеет недостаток:показывая большой злой логотип Google и требуя еще более злой ключ API карт Google, так что все крутые дети используют OpenLayers.

* различные примеры использования OpenLayers в OpenStreetMap wiki .Пример «OpenLayers Dynamic POI» показывает использование базы данных для маркеров (хотя этот пример немного запутан). Еще один пример всплывающих окон на моем сайте

Надеюсь, это поможет

3 голосов
/ 15 октября 2010

Похоже, они используют openLayer для рендеринга карты. Вот некоторые примеры и API-документы.

http://openlayers.org/dev/examples/

http://trac.osgeo.org/openlayers/wiki/Documentation

1 голос
/ 22 сентября 2011 
// Sample code by August Li
// Modified by Tom Moore to work with SQL
var zoom, center, currentPopup, map, lyrMarkers;
var popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
    "autoSize": true,
    "minSize": new OpenLayers.Size(300, 50),
    "maxSize": new OpenLayers.Size(500, 300),
    "keepInMap": true
});
var bounds = new OpenLayers.Bounds();
var lat=36.287179515680556;
var lon=-96.69170379638672;
var zoom=11;
var lonLat = new OpenLayers.LonLat(lon, lat).transform(
                 new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

// begin addMarker function
// info1 I was going to use to add a tooltip. Haven't figured out
// how to do that in OpenLayers yet :( Someone who knows share that with us
// iconurl is the url to the png file that you want to use for the icon.
// you MUST call addMarker at least once to initialize the map
function addMarker(lat, lng, info, info1, iconurl) {
    // First check to see if the map has been initialized. If not, do that now ...
    if (map == null) {
        var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 19,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };
        map = new OpenLayers.Map("map", options);
        map.addControl(new OpenLayers.Control.PanZoomBar());
        var lyrOsm = new OpenLayers.Layer.OSM();
        map.addLayer(lyrOsm);
        lyrMarkers = new OpenLayers.Layer.Markers("Markers");
        map.addLayer(lyrMarkers);

        //add marker on given coordinates
        map.setCenter(lonLat, zoom);
        zoom = map.getZoom();
    }

    var iconSize = new OpenLayers.Size(36, 36);
    var iconOffset = new OpenLayers.Pixel(-(iconSize.w / 2), -iconSize.h);
    var icon = new OpenLayers.Icon(iconurl, iconSize, iconOffset);
    var pt = new OpenLayers.LonLat(lng, lat).transform(
                 new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    bounds.extend(pt);
    var feature = new OpenLayers.Feature(lyrMarkers, pt);
    feature.closeBox = true;
    feature.popupClass = popupClass;
    feature.data.popupContentHTML = info;
    feature.data.overflow = "auto";
    var marker = new OpenLayers.Marker(pt, icon.clone());
    var markerClick = function(evt) {
        if (currentPopup != null && currentPopup.visible()) {
            currentPopup.hide();
        }
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    lyrMarkers.addMarker(marker);
}
// end addMarker function

С уважением!Надеюсь, это поможет тому, кому это нужно для работы ...

...