Javascript，更改谷歌地图标记颜色
Posted
技术标签:
【中文标题】Javascript，更改谷歌地图标记颜色【英文标题】：Javascript, Change google map marker color 【发布时间】：2012-06-19 07:33:41 【问题描述】：我能否知道一种通过 javascript 更改 Google 地图标记颜色的方法。我是这方面的新手，非常感谢您提供任何帮助。
我使用以下代码创建了一个标记
marker = new google.maps.Marker(
position: new google.maps.LatLng(locations[i][1],
locations[i][2]),
animation: google.maps.Animation.DROP,
map: map
);
【问题讨论】：
【参考方案1】：在 Google Maps API v3 中，您可以尝试更改标记图标。例如使用绿色图标：
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
或作为标记初始化的一部分：
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等等
【讨论】：
非常感谢 :) 这就是我一直在寻找的 :) 我可以知道，我是在我展示的实例化标记的地方应用它还是在外面单独定义？ :) 两者都有效。您可以添加icon 属性并设置它，或者使用setIcon。我将对此添加注释。
迄今为止所有***中的最佳答案！
这些图标似乎没有字母。在maps.google.com/mapfiles/marker_green.png、maps.google.com/mapfiles/marker_greenA.png 找到这些。
有没有办法查看所有图标？我试着取下 blue-dot 并得到了 404【参考方案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
);
请参阅this page 了解其他可能性。
【讨论】：
【参考方案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
);
see Example here
【讨论】：
【参考方案4】：您可以使用 google chart api 并使用 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'
);
【讨论】：
确实可以，使用 rgb 代码即时生成任何颜色 我正在使用这个非常好的图标库来标记iconarchive.com 它有一些预定义的尺寸，对于快速设计非常有用。 看起来非常强大和灵活，但不幸的是，这个 API 在 2019 年 3 月被关闭了 developers.google.com/chart/image/docs/gallery/dynamic_icons【参考方案5】：我真的很喜欢 Bahadır Yağan 给出的答案，但我不喜欢依靠 Google 提供的一组有限图标或外部 API 来生成我的标记图标。这是最初的解决方案：
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 );
这是我改进的解决方案：
var marker = new google.maps.Marker(
position: myLatlng,
icon:
path: 'm 12,2.4000002 c -2.7802903,0 -5.9650002,1.5099999 -5.9650002,5.8299998 0,1.74375 1.1549213,3.264465 2.3551945,4.025812 1.2002732,0.761348 2.4458987,0.763328 2.6273057,2.474813 L 12,24 12.9825,14.68 c 0.179732,-1.704939 1.425357,-1.665423 2.626049,-2.424188 C 16.809241,11.497047 17.965,9.94 17.965,8.23 17.965,3.9100001 14.78029,2.4000002 12,2.4000002 Z',
fillColor: '#00FF00',
fillOpacity: 1.0,
strokeColor: '#000000',
strokeWeight: 1,
scale: 2,
anchor: new google.maps.Point(12, 24),
,
);
我想要一个特定的图钉图标，所以我用 inkscape 制作了一个，然后打开 SVG 文件并将 svg 路径复制到代码中的路径中，但这适用于您放入“路径”中的任何 SVG 路径图标对象的属性。
结果如下：
【讨论】：
【参考方案6】：我在一张地图上设置了 4 艘船，所以我使用了 Google Developers 示例，然后对其进行了扭曲
https://developers.google.com/maps/documentation/javascript/examples/icon-complex
在下面的函数中，我设置了另外 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 中，我为每艘船设置了一种颜色：
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
【讨论】：
【参考方案7】：我建议使用Google Charts API，因为您可以指定文本、文本颜色、填充颜色和轮廓颜色，所有这些都使用十六进制颜色代码，例如#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;
然后，当您创建标记时，您只需设置图标属性，其中 myColor 变量是十六进制值（减去井号）：
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 的回答是指重定向到 Google Charts API 的第 3 方网站。这意味着如果那个人关闭了他们的服务器，你就会被淹没。我更喜欢 Google API 提供的灵活性以及直接访问 Google 的可靠性。只需确保为每种颜色指定一个值，否则它将不起作用。
【讨论】：
很遗憾，此 API 已于 2019 年 3 月关闭，请参阅 developers.google.com/chart/image/docs/gallery/dynamic_icons【参考方案8】：要扩展已接受的答案，您可以使用 http://chart.googleapis.com 处的 API 创建任何颜色的自定义 MarkerImages
除了改变颜色之外，这也会改变标记的形状，这可能是不需要的。
const marker = new window.google.maps.Marker(
position: markerPosition,
title: markerTitle,
map: map)
marker.addListener('click', () => marker.setIcon(changeIcon('00ff00'));)
const changeIcon = (newIconColor) =>
const newIcon = new window.google.maps.MarkerImage(
`http://chart.googleapis.com/chart?
chst=d_map_spin&chld=1.0|0|$newIconColor|60|_|%E2%80%A2`,
new window.google.maps.Size(21, 34),
new window.google.maps.Point(0, 0),
new window.google.maps.Point(10, 34),
new window.google.maps.Size(21,34)
);
return newIcon
来源：free udacity course on google maps apis
【讨论】：
【参考方案9】：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
);
【讨论】：
以上是关于Javascript，更改谷歌地图标记颜色的主要内容，如果未能解决你的问题，请参考以下文章