Javascript，更改google地图标记颜色

我可以通过Javascript了解一种更改Google Map标记颜色的方法吗？我是新手，希望有任何帮助，谢谢。

我使用下面的代码来创build一个标记

marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), animation: google.maps.Animation.DROP, map: map }); 

Answer 1

在Google Maps API v3中，您可以尝试更改标记图标。 例如对于绿色图标使用：

 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png') 

或者作为标记init的一部分：

 marker = new google.maps.Marker({ icon: 'http://...' }); 

其他颜色：

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

等等。

Answer 2

您可以使用strokeColor属性：

 var marker = new google.maps.Marker({ id: "some-id", icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor: "red", scale: 3 }, map: map, title: "some-title", position: myLatlng }); 

看到这个页面的其他可能性。

Answer 3

你可以使用这个代码，它工作正常。

  var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/"); var marker = new google.maps.Marker({ position: yourlatlong, icon: pinImage, map: map }); 

看这里的例子

Answer 4

你可以使用谷歌图表api和dynamic生成rgb代码的任何颜色：

例如：使用#ddd颜色的标记：

 http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd 

包括如上所述

  var marker = new google.maps.Marker({ position: marker, title: 'Hello World', icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd' }); 

Answer 5

我有4个船只在一张地图上设置，所以我使用Google Developers的例子，然后扭曲它

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

在function波纹pipe中，我设置了3个更多的颜色选项：

 function setMarkers(map, locations) { ... var image = { url: 'img/bullet_amarelo.png', // This marker is 20 pixels wide by 32 pixels tall. size: new google.maps.Size(40, 40), // The origin for this image is 0,0. origin: new google.maps.Point(0,0), // The anchor for this image is the base of the flagpole at 0,32. anchor: new google.maps.Point(0, 40) }; var image1 = { url: 'img/bullet_azul.png', // This marker is 20 pixels wide by 32 pixels tall. size: new google.maps.Size(40, 40), // The origin for this image is 0,0. origin: new google.maps.Point(0,0), // The anchor for this image is the base of the flagpole at 0,32. anchor: new google.maps.Point(0, 40) }; var image2 = { url: 'img/bullet_vermelho.png', // This marker is 20 pixels wide by 32 pixels tall. size: new google.maps.Size(40, 40), // The origin for this image is 0,0. origin: new google.maps.Point(0,0), // The anchor for this image is the base of the flagpole at 0,32. anchor: new google.maps.Point(0, 40) }; var image3 = { url: 'img/bullet_verde.png', // This marker is 20 pixels wide by 32 pixels tall. size: new google.maps.Size(40, 40), // The origin for this image is 0,0. origin: new google.maps.Point(0,0), // The anchor for this image is the base of the flagpole at 0,32. anchor: new google.maps.Point(0, 40) }; ... } 

而在下面，我为每艘船设定一种颜色：

 for (var i = 0; i < locations.length; i++) { ... if (i==0) var imageV=image; if (i==1) var imageV=image1; if (i==2) var imageV=image2; if (i==3) var imageV=image3; ... # remember to change icon: image to icon: imageV } 

最终的结果是：

http://www.mercosul-line.com.br/site/teste.html

Answer 6

我build议使用Google Charts API，因为您可以指定文本，文本颜色，填充颜色和轮廓颜色，全部使用hex颜色代码，例如＃FF0000红色。 你可以这样调用它：

 function getIcon(text, fillColor, textColor, outlineColor) { if (!text) text = '•'; //generic map dot var iconUrl = "http://chart.googleapis.com/chart?cht=d&chdp=mapsapi&chl=pin%27i\\%27[" + text + "%27-2%27f\\hv%27a\\]h\\]o\\" + fillColor + "%27fC\\" + textColor + "%27tC\\" + outlineColor + "%27eC\\Lauto%27f\\&ext=.png"; return iconUrl; } 

然后，当你创build你的标记，你只需设置图标属性，myColorvariables是hex值（减去散列符号）：

 var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), animation: google.maps.Animation.DROP, map: map, icon: getIcon(null, myColor, myColor2, myColor3) }); 

如果您只需要设置文本和填充颜色，则可以使用http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|FF0000作为替代url，这样会更容易解密。

khurram的答案指的是redirect到Google Charts API的第三方网站。 这意味着如果这个人把他们的服务器关掉， 我更喜欢Google API提供的灵活性以及直接进入Google的可靠性。 只要确保你为每种颜色指定一个值，否则它将不起作用。

Answer 7

var map_marker = $（“。map-marker”）。children（“img”）。attr（“src”）var pinImage = new google.maps.MarkerImage（map_marker）;

  var marker = new google.maps.Marker({ position: uluru, map: map, icon: pinImage }); }