Google Maps JS API v3 - 带自定义标记的简单多标记示例 [英] Google Maps JS API v3 - Simple Multiple Marker Example with Custom Markers

问题描述

这是一个简单Google Map的好例子：
Google Maps JS API v3 - 简单多标记示例

我试图在此示例中添加为每个制造商分配自定义图标的功能。
给定链接的例子：

$ $ $ pre $ var $ locations $ [
['Bondi Beach'，-33.890542， ['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'， - 'Manly Beach']，
 ['Cronulla Beach'，-34.028249,151.157507,3''images / icon3.png']，
' ，-33.80010128657071,151.28747820854187,2，'images / icon4.png']，
 ['Maroubra Beach'，-33.950198,151.259302,1，'images / icon5.png']]; 
  

预先感谢您的回答！

解决方案

这是一个简单的 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（新的google.maps.Marker（{
位置：新google.maps.LatLng（位置[i] [1]，位置[i] [2]），
 map：地图，
图标：locations [i] [4]，
 title：locations [i] [0] 
}）; 
} 
  locations [i] [1] 是lat和 locations [i] [2] 是lng，这并未经过测试，但它是您创建自定义图标的基础。 myGlobalMarker 是一个全局变量数组，它包含所有的标记，我不是100％确定图标位置是否需要绝对URL或相对URL，但是在我的Google Map应用程序中，我可以使用相对路径来显示自定义图标这是最终结果：
  
 
Here is a great example of a simple Google Map:
Google Maps JS API v3 - Simple Multiple Marker Example

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!
解决方案
Here is a simple JSFiddle Demo showing 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:
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. myGlobalMarker is 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:


                        
这篇关于Google Maps JS API v3  - 带自定义标记的简单多标记示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！