谷歌地图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' ] ]; 

感谢您提前回答问题！

- blh

Answer 1

这里有一个简单的 JSFiddle演示, 展示了如何创建自定义标记。在创建标记时，您可以使用icon参数自定义标记的图标。例如:

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
});

您可以使用自定义标记图像的位置设置icon参数。或者在您的情况下，可以这样做：

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]是纬度，locations[i][2]是经度。以下是创建自定义图标的基础代码，尚未测试。myGlobalMarker是全局变量数组，保存所有标记。我不确定图标位置需要绝对URL还是相对URL。但是，在我的Google地图应用程序中，我能够使用相对路径显示标记上的自定义图标。这是最终结果：

- KJYe.Name