Question

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

基本上我想生成自己的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主页和网络上的各种其他网站上显示一个滑动的地图。它经常与OpenStreetMap本身混淆，或者如果你想在你的网站上嵌入OpenStreetMap地图，那么人们会错误地认为你必须使用OpenLayers。不对。有lots of alternative javascript libraries for displaying a slippy map

...包括google maps API！您可以设置谷歌地图显示，但显示OpenStreetMap“平铺”图像而不是谷歌图块。见Google Maps Example。这具有代码兼容性的优势，这意味着您可以按照您在那里链接的谷歌地图教程进行操作，然后插入一些厚厚的代码来指定OpenStreetMap作为切片图层。

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

有various examples of using OpenLayers on the OpenStreetMap wiki。 “OpenLayers Dynamic POI”示例显示了数据库用于标记（尽管该示例有点复杂）。 Another popups example on my site

希望有所帮助

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

祝你好运！我希望这可以帮助需要这个的人......

将标记从SQL db添加到OSM

3 个答案: