blocks|key|544095|text|您可以使用strokeColor属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|544096|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
});|code-block|syntax|javascript|544097|有关其他可能性，请参阅this+page。|544098|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/maps/documentation/javascript/overlays#Symbols^0|5|B|0|0|B|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You can use the <code>strokeColor</code> property:

<pre><code>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
});
</code></pre>

See <a href="https://developers.google.com/maps/documentation/javascript/overlays#Symbols">this page</a> for other possibilities.

blocks|key|544151|text|你可以使用这段代码，它运行得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544152|+var+pinImage+=+new+google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");

+var+marker+=+new+google.maps.Marker({
++++++++++++position:+yourlatlong,
++++++++++++icon:+pinImage,
++++++++++++map:+map
++++++++});|code-block|syntax|javascript|544153|see+Example+here|offset|length|544154|entityMap|0|LINK|mutability|MUTABLE|url|http://www.googlemapsmarkers.com/^0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You can use this code it works fine.

<pre><code> var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");

 var marker = new google.maps.Marker({
 position: yourlatlong,
 icon: pinImage,
 map: map
 });
</code></pre>

<a href="http://www.googlemapsmarkers.com/" rel="noreferrer">see Example here</a>

blocks|key|544333|text|您可以使用google图表api并使用rgb代码动态生成任何颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544334|示例:使用#ddd颜色的标记：|544335|http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%25E2%2580%25A2%7Cddd|code-block|syntax|javascript|544336|包括如上所述|544337|+var+marker+=+new+google.maps.Marker({
++++position:+marker,
++++title:+'Hello+World',
++++icon:+'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%25E2%2580%25A2%7Cddd'
});|544338|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

you can use the google chart api and generate any color with rgb code on the fly:

example: marker with #ddd color:

<pre><code>http://chart.apis.google.com/chart?chst=d_map_pin_letter&amp;chld=%E2%80%A2|ddd
</code></pre>

include as stated above with 

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

blocks|key|327317|text|我有4艘船要在一张地图上设置，所以我使用了Google+Developers示例，然后扭曲了它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|327318|https://developers.google.com/maps/documentation/javascript/examples/icon-complex|offset|length|327319|在下面的函数中，我设置了另外3个颜色选项：|327320|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)
++++++++};
...
}|code-block|syntax|javascript|327321|在下面的FOR中，我为每艘船设置了一种颜色：|327322|for+(var+i+=+0;+i+<+locations.length;+i%2B%2B)+{
...
++++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
}|327323|最终结果：|327324|http://www.mercosul-line.com.br/site/teste.html|327325|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|29|0|0|0|0|0|0|0|0|1B|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]|11|$5|X|Y|Z|A|$10|T]]]]

I have 4 ships to set on one single map, so I use the Google Developers example and then twisted it

<a href="https://developers.google.com/maps/documentation/javascript/examples/icon-complex" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/icon-complex</a>

In the function bellow I set 3 more color options: 

<pre><code>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)
 };
...
}
</code></pre>

And in the FOR bellow I set one color for each ship:

<pre><code>for (var i = 0; i &lt; 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
}
</code></pre>

The final result:

<a href="http://www.mercosul-line.com.br/site/teste.html" rel="nofollow">http://www.mercosul-line.com.br/site/teste.html</a>

blocks|key|544295|text|我建议使用Google+Charts+API，因为您可以指定文本、文本颜色、填充颜色和轮廓颜色，所有这些都使用十六进制颜色代码，例如#FF0000表示红色。您可以这样调用它：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|544296|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%2527i\\%2527["+%2B+text+%2B+"%2527-2%2527f\\hv%2527a\\]h\\]o\\"+%2B+fillColor+%2B+"%2527fC\\"+%2B+textColor+%2B+"%2527tC\\"+%2B+outlineColor+%2B+"%2527eC\\Lauto%2527f\\&ext=.png";
++return+iconUrl;
}|code-block|syntax|javascript|544297|然后，在创建标记时，只需设置myColor属性，其中图标变量是十六进制值(减去散列符号)：|544298|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)
});|544299|如果你只需要设置文本和填充颜色，你可以使用http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•%7CFF0000，它更容易破译，作为替代网址。|style|CODE|544300|khurram的回答指的是重定向到Google+Charts+API的第三方站点。这意味着如果那个人关闭了他们的服务器，你就完蛋了。我更喜欢Google+API提供的灵活性，以及直接访问Google的可靠性。只需确保为每种颜色指定一个值，否则它将不起作用。|544301|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/chart/^0|5|H|0|0|0|0|0|L|1X|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|17|8|@$A|18|B|19|O|P]]|9|@]|C|$]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

I suggest using the <a href="https://developers.google.com/chart/" rel="nofollow noreferrer">Google Charts API</a> because 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:

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

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):

<pre><code>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)
});
</code></pre>

You can use <code>http://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=•|FF0000</code>, which is a bit easier to decipher, as an alternate URL if you only need to set text and fill color.

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.

blocks|key|327507|text|要对接受的答案进行扩展，您可以使用http://chart.googleapis.com上的API创建任何颜色的自定义MarkerImages|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|327508|除了更改颜色之外，这还会更改标记形状，这可能是不需要的。|327509|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%7C0%7C${newIconColor}%7C60%7C_%7C%25E2%2580%25A2`,
++++++++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
}|code-block|syntax|javascript|327510|来源：free+udacity+course+on+google+maps+apis|327511|entityMap|0|LINK|mutability|MUTABLE|url|https://eu.udacity.com/course/google-maps-apis--ud864^0|H|R|1N|C|0|0|0|3|13|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

To expand upon the accepted answer, you can create custom <code>MarkerImages</code> of any color using the API at <code>http://chart.googleapis.com</code>

In addition to changing color, this also changes marker shape, which may be unwanted.

<pre><code>const marker = new window.google.maps.Marker(
 position: markerPosition,
 title: markerTitle,
 map: map)
marker.addListener('click', () =&gt; marker.setIcon(changeIcon('00ff00'));)

const changeIcon = (newIconColor) =&gt; {
 const newIcon = new window.google.maps.MarkerImage(
 `http://chart.googleapis.com/chart? 
 chst=d_map_spin&amp;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
}
</code></pre>

Source: <a href="https://eu.udacity.com/course/google-maps-apis--ud864" rel="nofollow noreferrer">free udacity course on google maps apis</a>

blocks|key|327494|text|var+map_marker+=$(“.map-.children”).children(“img”).attr(“src”)+var+pinImage+=+new+google.maps.MarkerImage(map_marker)；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|327495|+++++var+marker+=+new+google.maps.Marker({
++++++position:+uluru,
++++++map:+map,
++++++icon:+pinImage
++++});
++}|code-block|syntax|javascript|327496|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

var map_marker = $(".map-marker").children("img").attr("src")
 var pinImage = new google.maps.MarkerImage(map_marker);

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

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.

I used the following code to create a marker

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

Javascript, Change google map marker color

服务器

我可以知道一种通过Javascript更改Google地图标记颜色的方法吗？我是新手，任何帮助都将不胜感激，谢谢。我使用以下代码创建了一个标记 marker = new google.maps.Marker({     position: new google.maps.LatLng(locations[i][1],      locations[i][2]),     animation: go

问Javascript，更改google地图标记颜色
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript，更改google地图标记颜色EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript，更改google地图标记颜色
EN