0

我有几个问题：

我正在尝试将自己的标记添加到地图中，但它似乎不起作用。此外，当我尝试在本地引用 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 链接就会消失。

谁能帮我吗？

4

2 回答 2

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副本？如果与一个版本相比它不起作用，它可能已经过时了。这通常是您想要保留库的本地副本的原因，因为它们不会自动更改为较新的版本。

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

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

于 2013-05-24T10:59:06.070 回答
0

我在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"

});

于 2013-05-23T22:18:34.057 回答