谷歌地圖JS API V3 - 簡單多個標記示例使用自定義標記

Question

下面是一個簡單的谷歌地圖的一個很好的例子： Google Maps JS API v3 - Simple Multiple Marker Example

我想加入到這個例子，各廠商指定自定義圖標的能力。 鑑於聯例如：

var locations = [ 
['Bondi Beach', -33.890542, 151.274856, 4], 
['Coogee Beach', -33.923036, 151.259052, 5], 
['Cronulla Beach', -34.028249, 151.157507, 3], 
['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
['Maroubra Beach', -33.950198, 151.259302, 1] ]; 

我想是這樣的：提前

var locations = [ 
['Bondi Beach', -33.890542, 151.274856, 4,'images/icon1.png'], 
['Coogee Beach', -33.923036, 151.259052, 5,'images/icon2.png' ], 
['Cronulla Beach', -34.028249, 151.157507, 3,'images/icon3.png' ], 
['Manly Beach', -33.80010128657071, 151.28747820854187, 2,'images/icon4.png' ], 
['Maroubra Beach', -33.950198, 151.259302, 1,'images/icon5.png' ] ]; 

謝謝您的回答！

Answer 1

以下是一個簡單的JSFiddle Demo，顯示使用以下代碼創建的自定義標記。 創建標記時，您可以使用圖標參數自定義標記的圖標。例如：

var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    icon: 'http://www.kjftw.com/gmap/images/icons/numeric/red10.png', 
    zIndex: Math.round(latlng.lat() * -100000) << 5 
}); 

您可以使用自定義標記圖像的位置設置圖標參數。或者，你的情況是這樣的：

for(var i=0; i<locations.length; i++){ 
    myGlobalMarker.push(new google.maps.Marker({ 
      position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
      map: map, 
      icon: locations[i][4], 
      title: locations[i][0] 
    }); 
} 

如果假設locations[i][1]是lat和locations[i][2]是液化天然氣。這沒有經過測試，但它是創建自定義圖標的基礎。 myGlobalMarker是保存所有標記的全局變量數組。我不是100％確定圖標位置是否需要絕對URL或相對URL。但是，在我的Google地圖應用程序中，我能夠使用相對路徑在標記上顯示自定義圖標。這是最終結果：