blocks|key|1084299|text|由于maps+v2已弃用，因此您可能对v3+maps感兴趣：https://developers.google.com/maps/documentation/javascript/markers#simple_icons|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1084300|对于v2映射：|1084301|http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview|1084302|你会有一组逻辑来处理所有的“常规”引脚，而另一组逻辑则使用新定义的标记来处理“特殊”引脚。|1084303|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/maps/documentation/javascript/markers#simple_icons|1^0|U|28|0|0|0|0|23|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|G]]]]

Since maps v2 is deprecated, you are probably interested in v3 maps: <a href="https://developers.google.com/maps/documentation/javascript/markers#simple_icons" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/markers#simple_icons</a>

For v2 maps:

<a href="http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview" rel="noreferrer">http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview</a>

You would have one set of logic do all the 'regular' pins, and another that does the 'special' pin(s) using the new marker defined.

blocks|key|1084345|text|在Google+Maps+API的版本3中，最简单的方法可能是获取一个自定义图标集，就像本杰明·基恩在这里创建的那样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1084346|http://www.benjaminkeen.com/google-maps-coloured-markers/|offset|length|1084347|如果您将所有这些图标放在与地图页面相同的位置，则只需在创建标记时使用适当的图标选项即可对其进行着色：|1084348|var+beachMarker+=+new+google.maps.Marker({
++position:+myLatLng,
++map:+map,
++icon:+'brown_markerA.png'
});|code-block|syntax|javascript|1084349|这非常简单，这也是我目前正在从事的项目中使用的方法。|1084350|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1L|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

With version 3 of the Google Maps API, the easiest way to do this may be by grabbing a custom icon set, like the one that Benjamin Keen has created here:
<a href="http://www.benjaminkeen.com/google-maps-coloured-markers/" rel="nofollow noreferrer">http://www.benjaminkeen.com/google-maps-coloured-markers/</a>
If you put all of those icons at the same place as your map page, you can colorize a Marker simply by using the appropriate icon option when creating it:
<pre><code>var beachMarker = new google.maps.Marker({
 position: myLatLng,
 map: map,
 icon: 'brown_markerA.png'
});
</code></pre>
This is super-easy, and is the approach I'm using for the project I'm working on currently.

blocks|key|1299432|text|就我个人而言，我认为Google+Charts+API生成的图标看起来很棒，而且很容易动态定制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1299433|在Google+Maps+API+3+-+Custom+marker+color+for+default+(dot)+marker上查看我的答案|offset|length|1299434|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker/7686977#7686977^0|0|1|1S|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

Personally, I think the icons generated by the Google Charts API look great and are easy to customise dynamically.

See my answer on <a href="https://stackoverflow.com/questions/7095574/google-maps-api-3-custom-marker-color-for-default-dot-marker/7686977#7686977">Google Maps API 3 - Custom marker color for default (dot) marker</a>

blocks|key|1084425|text|我发现最简单的方法是使用BitmapDescriptorFactory.defaultMarker()，documentation甚至有一个设置颜色的示例。来自我自己的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1084426|MarkerOptions+marker+=+new+MarkerOptions()
++++++++++++.title(formatInfo(data))
++++++++++++.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
++++++++++++.position(new+LatLng(data.getLatitude(),+data.getLongitude()))|code-block|syntax|javascript|1084427|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.android.com/reference/com/google/android/gms/maps/model/BitmapDescriptor.html^0|1G|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The simplest way I found is to use BitmapDescriptorFactory.defaultMarker() the <a href="http://developer.android.com/reference/com/google/android/gms/maps/model/BitmapDescriptor.html" rel="noreferrer">documentation</a> even has an example of setting the color. From my own code:

<pre><code>MarkerOptions marker = new MarkerOptions()
 .title(formatInfo(data))
 .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
 .position(new LatLng(data.getLatitude(), data.getLongitude()))
</code></pre>

blocks|key|1299510|text|This+relatively+recent+article提供了一个简单的示例，其中包含一组有限的Google+Maps彩色图标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1299511|有关使用蓝色和橙色地图标记的真实网站示例，请参阅this+website并查看谷歌地图下的脚本。|1299512|<section+id="map"+class="map">+++

++++<script>
++++++++let+map;
++++++++const+speediwash+=+{+lat:+52.656937,+lng:+-8.634390+};
++++++++const+stJosephX+=+{+lat:+52.658041,+lng:+-8.632414};
++++++++//+const+maryI+=+{+lat:+52.653192,+lng:+-8.638974+};
++++++++const+trainStn+=+{+lat:+52.658757,+lng:+-8.623560+};
++++++++//+const+claytonH+=+{+lat:+52.660802,+lng:+-8.636411+};
+++++++++++++++++++++
++++++++let+markersArray+=+[];++++++++++//+Global+array+to+store+the+marker+object

++++++++function+initMap()+
++++++++{
++++++++++map+=+new+google.maps.Map(document.getElementById('map'),+
++++++++++++{
++++++++++++++center:+stJosephX,
++++++++++++++zoom:+15.1
++++++++++++});
++++++++++addMarker(speediwash,+"Speediwash",+"blue");
++++++++++//addMarker(maryI,+"Mary+I+College",+"green");
++++++++++addMarker(trainStn,+"Train+Station",+"orange");
++++++++++//addMarker(claytonH,+"Clayton+Hotel",+"purple");
++++++++}

++++++++function+addMarker(latLng,+alabel,+color)+
++++++++{
++++++++++let+url+=+"https://maps.google.com/mapfiles/ms/icons/";
++++++++++++++++++++++++url+%2B=+color+%2B+"-dot.png";
++++++++++++++++++++++
++++++++++let+marker+=+new+google.maps.Marker(
++++++++++++++++++++++++{
++++++++++++++++++++++++++++map:+map,
++++++++++++++++++++++++++++position:+latLng,
++++++++++++++++++++++++++++label:+alabel,
++++++++++++++++++++++++++++icon:+++
++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++url:+url,+++++++
++++++++++++++++++++++++++++++++labelOrigin:+new+google.maps.Point(60,+30)
++++++++++++++++++++++++++++}
++++++++++++++++++++++++});
++++++++++++++++++++}
++++</script>

++++<script+async+defer
++++++++++++++++++++src="https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&callback=initMap">
++++</script>|code-block|syntax|javascript|1299513|entityMap|0|LINK|mutability|MUTABLE|url|https://www.freecodecamp.org/news/how-to-change-javascript-google-map-marker-color-8a72131d1207/|1|https://speediwash.ie/contact.html^0|0|U|0|0|O|C|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<a href="https://www.freecodecamp.org/news/how-to-change-javascript-google-map-marker-color-8a72131d1207/" rel="nofollow noreferrer">This relatively recent article</a> provides a simple example with a limited Google Maps set of colored icons.
For a real website example using blue and orange map markers, see <a href="https://speediwash.ie/contact.html" rel="nofollow noreferrer">this website</a> and view the script under the Google map.
<pre><code>&lt;section id=&quot;map&quot; class=&quot;map&quot;&gt; 

 &lt;script&gt;
 let map;
 const speediwash = { lat: 52.656937, lng: -8.634390 };
 const stJosephX = { lat: 52.658041, lng: -8.632414};
 // const maryI = { lat: 52.653192, lng: -8.638974 };
 const trainStn = { lat: 52.658757, lng: -8.623560 };
 // const claytonH = { lat: 52.660802, lng: -8.636411 };
 
 let markersArray = []; // Global array to store the marker object

 function initMap() 
 {
 map = new google.maps.Map(document.getElementById('map'), 
 {
 center: stJosephX,
 zoom: 15.1
 });
 addMarker(speediwash, &quot;Speediwash&quot;, &quot;blue&quot;);
 //addMarker(maryI, &quot;Mary I College&quot;, &quot;green&quot;);
 addMarker(trainStn, &quot;Train Station&quot;, &quot;orange&quot;);
 //addMarker(claytonH, &quot;Clayton Hotel&quot;, &quot;purple&quot;);
 }

 function addMarker(latLng, alabel, color) 
 {
 let url = &quot;https://maps.google.com/mapfiles/ms/icons/&quot;;
 url += color + &quot;-dot.png&quot;;
 
 let marker = new google.maps.Marker(
 {
 map: map,
 position: latLng,
 label: alabel,
 icon: 
 {
 url: url, 
 labelOrigin: new google.maps.Point(60, 30)
 }
 });
 }
 &lt;/script&gt;

 &lt;script async defer
 src=&quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyANwXk4HVQv7w5WAEUCStjAgT25b0s0p1Y&amp;callback=initMap&quot;&gt;
 &lt;/script&gt;
</code></pre>

I'm using the Google Maps API to build a map full of markers, but I want one marker to stand out from the others. The simplest thing to do, I think, would be to change the color of the marker to blue, instead of red. Is this a simple thing to do or do I have to create a whole new icon somehow? If I do have to create a new icon, what's the easiest way to do that?

How can I change the color of a Google Maps marker?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正在使用Google Maps API构建一个充满标记的地图，但我希望其中一个标记能从其他标记中脱颖而出。我认为，最简单的做法是将标记的颜色改为蓝色，而不是红色。这是一件简单的事情，还是我必须创建一个全新的图标？如果我必须创建一个新图标，最简单的方法是什么？

问如何更改Google Maps标记的颜色？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改Google Maps标记的颜色？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改Google Maps标记的颜色？
EN