首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何更改Google Maps标记的颜色?

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

Stack Overflow用户
提问于 2010-03-19 03:57:42
回答 5查看 458.7K关注 0票数 183

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

EN

Stack Overflow用户

发布于 2020-05-15 19:59:59

This relatively recent article提供了一个简单的示例,其中包含一组有限的Google Maps彩色图标。

有关使用蓝色和橙色地图标记的真实网站示例,请参阅this website并查看谷歌地图下的脚本。

代码语言:javascript
运行
复制
<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 += color + "-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>
票数 -1
EN
查看全部 5 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2472957

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档