使用自定義標記而不是默認標記（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); 

    } 

謝謝！

Answer 1

查看OpenLayers Marker documentation有一個例子。您正在通過錯誤位置的圖標。它必須在OpenLayers.Marker()構造函數內完成，而不是在OpenLayers.Layer.Markers.addMarker()。

而不是

var marker1 = new OpenLayers.Marker(lonLat1); 

嘗試

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

因爲他們忽略你的addMarker()調用刪除第二個參數。