javascript Google Maps JS API v3 - 带有自定义标记的简单多标记示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5666173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers
提问by blh
Here is a great example of a simple Google Map: Google Maps JS API v3 - Simple Multiple Marker Example
这是一个简单的谷歌地图的一个很好的例子： 谷歌地图 JS API v3 - 简单的多标记示例
I am trying to add to this example the ability to assign each maker a custom Icon. Given the linked 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] ];
I am thinking something like:
我在想这样的事情：
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' ] ];
Thanks in advance for your answers!
预先感谢您的回答！
采纳答案by u476945
Here is a simple JSFiddle Demoshowing a custom marker created with the following codes. You can customize the icon of your marker with the icon parameter when creating a marker. For instance:
这是一个简单的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
});
You can set the icon param with the location of your custom marker image. Or in your case something like this:
您可以使用自定义标记图像的位置设置图标参数。或者在你的情况下是这样的：
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]
});
}
Where assuming locations[i][1]is the lat and locations[i][2]is the lng. This is not tested, but it's a base for what you can do to create custom icon. myGlobalMarkeris a global variable array that holds all markers. I am not 100% sure if absolute URL or relative URL is needed for the icon location. However, in my Google Map app i was able to use relative path to display custom icon on my marker. This is the final result:
其中假设locations[i][1]是纬度，locations[i][2]是 lng。这未经测试，但它是您创建自定义图标的基础。myGlobalMarker是一个包含所有标记的全局变量数组。我不是 100% 确定图标位置是否需要绝对 URL 或相对 URL。但是，在我的 Google Map 应用程序中，我能够使用相对路径在我的标记上显示自定义图标。这是最终结果：
