如何在v3中爲Google地圖標記放置多個圖標？

我正在嘗試創建一個類似於this（使用API的v2）的映射。我希望地圖上的每個標記都包含背景爲like so的圖像。如何在v3中爲Google地圖標記放置多個圖標？

使用icon和shadow的MarkerOptions似乎並沒有做到這一點，因爲一個標記影子落在後面其他標記的圖標。

enter image description here

2011-11-23 adamyonk

我認爲你必須將圖像與標記的背景合併。當我構建類似的東西時，我使用了CSS sprites，並根據標準高度計算了垂直偏移量（vPos）。我只是沒有打擾陰影。

 var mImage = new google.maps.MarkerImage("YOURMARKER.png", 
     new google.maps.Size(34, 35), 
     new google.maps.Point(0, vPos), 
     new google.maps.Point(10, 34) 
    ); 
    //insert marker 
    marker = new google.maps.Marker({ 
     icon: mImage, 
     position: new google.maps.LatLng(latitude, longitude), 
     map: map 
    });

來源

2011-11-23 23:49:13

因此，您通過CSS定位MarkerImages並設置這些背景？那個選擇器是什麼樣的？ – adamyonk

.mapMarker {height：35px; width：34px; background-position：0 0} –

是的，標記陰影都放置在單獨的圖層 - 低於所有標記。您必須將背景和照片合併爲一個圖標圖像，或create a new class which would inherit from MarkerImage。

來源

2011-11-25 08:53:49 TMS

您可以使用一個優秀的小庫，RichMarker。其文檔是here。

爲了讓使用更方便，你甚至可以創建自己的自定義標記類，像這樣：

Ns.Marker = function(properties) { 

    RichMarker.call(this, properties); 

    this.setContent('<div class="three-images-marker">' + 
      properties.NsImage ? '<div class="marker-image-1"><img src="'+properties.NsImage1+'"/></div>' : '' + 
      properties.NsFrameImage ? '<div class="marker-image-2"><img src="'+properties.NsImage2+'"/></div>' : '' + 
     '</div>'); 
}; 

Ns.Marker.prototype = Object.create(RichMarker.prototype); 


// and use it like this: 
var yourFramedMarker = new Ns.Marker({ 
     position: yourMarkerLatlng, 
     map: yourMap, 
     NsImage: 'example.com/image.png', 
     NsFrameImage: 'example.com/frame.png', 
});

「Ns個」是無論你使用的命名空間，如果你這樣做。

從這裏開始，它的CSS工作，你可以定位圖像，只要你喜歡。

來源

2014-02-02 22:53:14

如何在v3中爲Google地圖標記放置多個圖標？

回答

相關問題