标签：google-maps google-maps-api-3 javascript

这是一个简单的Google Map的很好的例子：
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' ] ]; 

预先感谢您的回答！

解决方法:

这是一个简单的JSFiddle Demo,显示了使用以下代码创建的自定义标记.
创建标记时,可以使用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
});

您可以使用自定义标记图像的位置设置图标参数.或者在您的情况下,如下所示：

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]是lng.这未经测试,但这是创建自定义图标的基础. myGlobalMarker是包含所有标记的全局变量数组.我不确定100％是否需要图标位置的绝对URL或相对URL.但是,在我的Google Map应用程序中,我可以使用相对路径在标记上显示自定义图标.这是最终结果：

标签：google-maps,google-maps-api-3,javascript
来源： https://codeday.me/bug/20191208/2092052.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。