geolocation - 将标记从 SQL 数据库添加到 OSM

Question

我是 OpenStreetMap 的新手，我一直在浏览 wiki 和网络，我似乎无法在任何地方找到教程，但我在网络上看到了示例。

基本上我想生成我自己的 OpenStreetmap 并绘制标记，从 MySQL 数据库中获取纬度和经度并将它们绘制在我的地图上。当用户点击一个标记时，我想要一个弹出窗口。基本上我想要这个http://code.google.com/apis/maps/articles/phpsqlajax.html但对于 OpenStreetMap 而不是谷歌地图。

Answer 1

看起来他们正在使用openLayer进行地图渲染。以下是一些示例和 api 文档。

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

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

Answer 2

要做到这一点，您需要找出用于在“滑动地图”界面上显示标记的 javascript。

OpenLayers 是一个流行的 javascript 库的名称。它是免费和开源的。它用于在 OpenStreetMap.org 主页和 Web 上的各种其他站点上显示一张易滑的地图。它经常与 OpenStreetMap 本身混淆，或者人们错误地认为如果您想在您的站点上嵌入 OpenStreetMap 地图，您必须使用 OpenLayers。不对。有很多可供选择的 JavaScript 库用于显示滑图

...包括谷歌地图 API！您可以设置谷歌地图显示，但显示 OpenStreetMap “平铺”图像而不是谷歌平铺。请参阅谷歌地图示例。这具有代码兼容性的优势，这意味着您可以按照您在此处链接的谷歌地图教程进行操作，然后放入一些厚颜无耻的代码以将 OpenStreetMap 指定为切片图层。

这样做的缺点是显示了一个大的邪恶的谷歌标志，并且需要一个更邪恶的谷歌地图 API 密钥，所以所有酷孩子都在使用 OpenLayers。

在 OpenStreetMap wiki 上有各种使用 OpenLayers 的示例。“OpenLayers Dynamic POI”示例显示了标记数据库的使用（尽管该示例有点复杂）。 我网站上的另一个弹出窗口示例

希望有帮助

Answer 3

// 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

此致！我希望这可以帮助需要这个工作的人......