是否可以使用多個圖像作爲Google Maps v3 MarkerImage？

我想要一個由三幅圖像組成的地圖標記。兩個圖像在所有標記變化的情況下都是相同的。似乎沒有辦法在MarkerImage類中指定多個圖像。我能想到的唯一方法是將所有圖像繪製到畫布上，然後將其輸出爲MarkerImage類的png dataURL。這似乎是過度殺傷。是否可以使用多個圖像作爲Google Maps v3 MarkerImage？

來源

2011-09-21 yincrash

我不認爲這是可能的三個不同的圖像。

如果兩個圖像總是相同我想你可以將它們合併成一個並存儲在icon屬性中，然後在shadow屬性中使用變量圖像，或者反之亦然（圖標將始終位於影子）。你只需要操縱MarkerImage對象的大小和位置。

工作示例：http://jsfiddle.net/mG4uz/1/

var image1 = new google.maps.MarkerImage(
    'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png', 
    new google.maps.Size(45, 90), //adjust size of image placeholder 
    new google.maps.Point(0, 0), //origin 
    new google.maps.Point(0, 25) //anchor point 
); 

var image2 = new google.maps.MarkerImage(
    'http://google-maps-icons.googlecode.com/files/sailboat-tourism.png', 
    new google.maps.Size(45, 45), 
    new google.maps.Point(0, 0), 
    new google.maps.Point(0, 0) 
); 

var marker = new google.maps.Marker({ 
    position: centerPosition, 
    map: map, 
    icon: image1, 
    shadow:image2 
    });

來源

2011-09-21 18:26:16

當標記重疊時，使用變量圖像作爲陰影會產生問題，因爲所有圖標始終顯示在所有陰影之上。我目前的方法將兩個靜態圖像組合成一個圖像，幸好沒有瘋狂的不透明度重疊問題，然後將兩個標記放在同一緯度/長度並增加z-索引。默認的重疊行爲被取消，並且在將3個標記置於相同位置時不起作用。 – yincrash

在這種情況下，畫布可能是最佳選擇。如果我遇到別的事情，我會讓你知道的。 –

google.maps.Marker的shadow屬性不再可用。 – geocodezip

我會嘗試定義一個新的類，它會從google.maps.MarkerImage繼承，將允許它，然後只需要調用marker.setIcon()與此對象。

也看看here和here。

來源

2011-11-30 15:13:13 TMS

爲什麼大家都覺得這麼複雜？

該示例代碼也有點不幸選擇... shadow：image2 ??

一旦兩個圖像由VAR定義 - 他們是訪問（可能需要進行全局定義，這取決於具體的應用是什麼）

如果你需要更多的圖標，只是他們推到一個數組。 ...

而且您需要爲每種可能的組合創建單獨的圖形...因爲MarkerImage對象只支持1個圖像和1個陰影。

來源

2011-11-30 17:19:25

您可以使用優秀的小型圖書館RichMarker。其文檔是here。

你甚至可以繼承它，並創建一個自定義的標記類，像這樣：

Ns.Marker = function(properties) { 

    RichMarker.call(this, properties); 

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

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

，然後用它是這樣的：

var gorgeousMarker = new Ns.Marker({ 
     position: yourMarkerLatlng, 
     map: yourMap, 
     NsImage1: 'example.com/image1.png', 
     NsImage2: 'example.com/image2.png', 
     NsImage3: 'example.com/image3.png', 
});

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

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

來源

2014-02-02 22:27:29

是否可以使用多個圖像作爲Google Maps v3 MarkerImage？

回答

相關問題