Javascript，更改谷歌地图标记颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11064081/
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
Javascript, Change google map marker color
提问by Hasitha Shan
May I know a way to change the Google Map marker color via Javascript.. I am new at this and any help would be much appreciated, Thank you.
我可以知道一种通过 Javascript 更改 Google 地图标记颜色的方法。我是新手，非常感谢您的帮助，谢谢。
I used the following code to create a marker
我使用以下代码创建了一个标记
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],
locations[i][2]),
animation: google.maps.Animation.DROP,
map: map
});
回答by jsalonen
In Google Maps API v3 you can try changing marker icon. For example for green icon use:
在 Google Maps API v3 中，您可以尝试更改标记图标。例如对于绿色图标使用：
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')
Or as part of marker init:
或者作为标记初始化的一部分：
marker = new google.maps.Marker({
icon: 'http://...'
});
Other colors:
其他颜色：
- http://maps.google.com/mapfiles/ms/icons/blue-dot.png
- http://maps.google.com/mapfiles/ms/icons/red-dot.png
- http://maps.google.com/mapfiles/ms/icons/blue-dot.png
- http://maps.google.com/mapfiles/ms/icons/red-dot.png
Etc.
等等。
回答by Bahad?r Ya?an
You can use the strokeColorproperty:
您可以使用该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
});
See this pagefor other possibilities.
有关其他可能性，请参阅此页面。
回答by khurram
You can use this code it works fine.
您可以使用此代码，它工作正常。
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});
回答by guido _nhcol.com.br_
you can use the google chart api and generate any color with rgb code on the fly:
您可以使用 google chart api 并使用 rgb 代码即时生成任何颜色：
example: marker with #ddd color:
示例：带有#ddd 颜色的标记：
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ddd
include as stated above with
包括如上所述
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'
});
回答by androidseb
I really liked the answer given by Bahad?r Ya?an except I didn't like depending on a limited set of icons given by Google or an external API to generate my marker icons. Here is the initial solution:
我真的很喜欢 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({ id: "some-id", icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeColor: "red", scale: 3 }, map: map, title: "some-title", position: myLatlng });
And here is my improved solution:
这是我改进的解决方案：
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),
},
});
I wanted a specific pin icon so I went and made one with inkscape, then opened the SVG file and copied the svg path into the path into the code, but this works with any SVG path that you put in the "path" attribute of the icon object.
我想要一个特定的图钉图标，所以我使用inkscape制作了一个图标，然后打开SVG文件并将svg路径复制到代码中的路径中，但这适用于您放入“path”属性的任何SVG路径图标对象。
Here is the result:
结果如下：
回答by LuyRamone
I have 4 ships to set on one single map, so I use the Google Developers example and then twisted it
我在一张地图上设置了 4 艘船，所以我使用了 Google Developers 示例，然后对其进行了扭曲
https://developers.google.com/maps/documentation/javascript/examples/icon-complex
https://developers.google.com/maps/documentation/javascript/examples/icon-complex
In the function bellow I set 3 more color options:
在下面的函数中，我设置了另外 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)
};
...
}
And in the FOR bellow I set one color for each ship:
在 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
}
The final result:
最终结果：
回答by Mideus
I suggest using the Google Charts APIbecause you can specify the text, text color, fill color and outline color, all using hex color codes, e.g. #FF0000 for red. You can call it as follows:
我建议使用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;
}
Then, when you create your marker you just set the icon property as such, where the myColor variables are hex values (minus the hash sign):
然后，当您创建标记时，您只需设置 icon 属性，其中 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)
});
You can use http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=?|FF0000, which is a bit easier to decipher, as an alternate URL if you only need to set text and fill color.
http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=?|FF0000如果您只需要设置文本和填充颜色，您可以使用更容易解读的 来作为替代 URL。
khurram's answer refers to a 3rd party site that redirects to the Google Charts API. This means if that person takes down their server you're hosed. I prefer having the flexibility the Google API offers as well as the reliability of going directly to Google. Just make sure you specify a value for each of the colors or it won't work.
khurram 的回答是指重定向到 Google Charts API 的第 3 方站点。这意味着如果那个人关闭了他们的服务器，你就会被灌输。我更喜欢 Google API 提供的灵活性以及直接访问 Google 的可靠性。只需确保为每种颜色指定一个值，否则它将不起作用。
回答by AlexNikonov
To expand upon the accepted answer, you can create custom MarkerImagesof any color using the API at http://chart.googleapis.com
要扩展接受的答案，您可以MarkerImages使用 API创建任何颜色的自定义http://chart.googleapis.com
In addition to changing color, this also changes marker shape, which may be unwanted.
除了改变颜色之外，这还会改变标记形状，这可能是不需要的。
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
}
回答by Azim munna
var map_marker = $(".map-marker").children("img").attr("src") var pinImage = new google.maps.MarkerImage(map_marker);
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
});
}
