使用自定义标记代替默认标记 (Openlayers)

Question

这是一个简单的问题，但我陷在代码中，无法找到解决方案;希望有人能帮忙！

我在地图上有三个标记，并希望每个标记都有不同的图标。

我无法弄清楚在哪里进行此操作 - 我需要重新绘制吗？

我看到了这个问题OpenLayers problem with marker icons ，但是不知道如何实现解决方案。

我的代码：

      function init() {
    map = new OpenLayers.Map("basicMap");
    var mapnik         = new OpenLayers.Layer.Stamen("toner-background");
    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(30,55.515).transform( fromProjection, toProjection);
    var zoom           = 4; 

    map.addLayer(mapnik);
    map.setCenter(position, zoom );


var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);

var icon1 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
var icon2 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-gold.png', size, offset);
var icon3 = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker-green.png', size, offset);

        var lonLat1 = new OpenLayers.LonLat(0.1062,51.5171).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                        );


        var lonLat2 = new OpenLayers.LonLat(2.3470,48.8742).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                        );

                        var lonLat3 = new OpenLayers.LonLat(7.2692,43.7028).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        map.getProjectionObject() // to Spherical Mercator Projection
                        );

var marker1 = new OpenLayers.Marker(lonLat1);
    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker1.icon.size = size;
marker1.icon.offset = offset;

var feature = new OpenLayers.Feature(markers, lonLat1);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
feature.data.popupContentHTML = '<p>Marker1<p>';
feature.data.overflow = "hidden";

marker1.feature = feature;


var markerClick = function (evt) {
    if (this.popup == null) {
        this.popup = this.createPopup(this.closeBox);
        map.addPopup(this.popup);
        this.popup.show();
    } else {
        this.popup.toggle();
    }
    OpenLayers.Event.stop(evt);
};
marker1.events.register("mousedown", feature, markerClick);

var marker2 = new OpenLayers.Marker(lonLat2);
        var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);



var feature = new OpenLayers.Feature(markers, lonLat2);

feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
feature.data.popupContentHTML = '<p>Marker2<p>';
feature.data.overflow = "hidden";
marker2.feature = feature;

var markerClick = function (evt) {
    if (this.popup == null) {
        this.popup = this.createPopup(this.closeBox);
        map.addPopup(this.popup);
        this.popup.show();
    } else {
        this.popup.toggle();
    }
    OpenLayers.Event.stop(evt);
};
marker2.events.register("mousedown", feature, markerClick);



var marker3 = new OpenLayers.Marker(lonLat3);
        var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    marker3.icon.size = size;
marker3.icon.offset = offset;
var feature = new OpenLayers.Feature(markers, lonLat3);
feature.closeBox = true;
feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, { autoSize: true });
feature.data.popupContentHTML = '<p>Marker 3<p>';
feature.data.overflow = "hidden";

marker3.feature = feature;

var markerClick = function (evt) {
    if (this.popup == null) {
        this.popup = this.createPopup(this.closeBox);
        map.addPopup(this.popup);
        this.popup.show();
    } else {
        this.popup.toggle();
    }
    OpenLayers.Event.stop(evt);
};
marker3.events.register("mousedown", feature, markerClick);

markers.addMarker(marker1, icon1);

markers.addMarker(marker2, icon2);

markers.addMarker(marker3, icon3);

  }

谢谢！

- juicycoder

---

看看Openlayers StyleMaps和查找表。 - Christophe Roussy

Answer 1

请看OpenLayers标记文档，其中有一个示例。你将图标传递到了错误的位置。这必须在OpenLayers.Marker()构造函数内完成，而不是在OpenLayers.Layer.Markers.addMarker()中完成。

请改为

var marker1 = new OpenLayers.Marker(lonLat1);

尝试

var marker1 = new OpenLayers.Marker(lonLat1, icon1);

并且在你的addMarker()调用中删除第二个参数，因为它们会被忽略。

- scai