Question

我有几个问题：

我正在尝试将自己的标记添加到地图中，但它似乎不起作用。此外，当我尝试在本地引用OpenLayer.js文件时，默认的红色标记会消失。

我在网上找到了一些例子，但恐怕不成功。所以我想在这里寻求一些帮助。

现在我的代码看起来像这样：

    <div id="Map" style="height: 250px; width: 400px" ></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<%--<script src="js/osm/api/OpenLayers.js"></script>--%>
<script>
    var lat = 55.676098;
    var lon = 12.568337;
    var zoom = 11;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);

    map = new OpenLayers.Map("Map");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

    var markers = new OpenLayers.Layer.Markers("Markers");//("Images/Icons/map-marker.png");
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(position));

    map.setCenter(position, zoom);
</script>

正如你所看到的，我试图从'Images / Icons / map-marker.png'中引用我自己的标记而没有任何运气。

另外你可以看到我试图使用'OpenLayers.js'的本地副本，我不知道我是应该在本地使用它还是总是参考'www.openlayers.org'，我相信是指当地足够好吗？

同样如前所述，如果我引用本地.js文件，红色标记，缩放按钮和OSM链接将消失。

任何人都可以帮助我吗？

Answer 1

（您实际上是在询问有关 OpenLayers 的问题，而不是 OpenStreetMap ）

OpenLayers Marker文档提供了自定义标记图标的示例。您必须创建 OpenLayers.Icon 对象：

var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("Images/Icons/map-marker.png", size, offset);
markers.addMarker(new OpenLayers.Marker(position, icon));

您从哪里获得本地 OpenLayers.js 副本？如果它与一个版本相比不起作用，它可能会过时。这通常是您希望保留库的本地副本的原因，因为它们不会自动更改为更新的版本。

您还应该确保您从网络获得的示例是最新的。理想情况下，您使用official OpenLayers examples之一。

除了OpenLayers，您还可以尝试使用更现代，更易于使用的LeafLet library。

Answer 2

我在http://wiki.openstreetmap.org/wiki/Marker_API找到了这个：

marker = new khtml.maplib.overlay.Marker({
    position: new khtml.maplib.LatLng(0, 0),
    icon: {
            url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/red-pushpin.png",
            size: {width: 26, height: 32},
            origin: {x: 0, y: 0},
            anchor: {
                    x: "-10px",
                    y: "-32px"
            }
    },
    shadow: {
            url: "http://maps.gstatic.com/intl/de_de/mapfiles/ms/micons/pushpin_shadow.png",
            size: {
                    width: "40px",
                    height: "32px"
            },
            origin: {x: 0, y: 0},
            anchor: {x: 0, y: -32 }
    },
    draggable: true,
    title: "moveable marker"

}）;

OSM（开放街道地图）帮助新手

2 个答案: