如何更改 Google 地图标记的颜色？

Question

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

Answer 1

对于 Google Maps API 版本 3，最简单的方法可能是获取自定义图标集，就像 Benjamin Keen 在此处创建的图标集：

http://www.benjaminkeen.com/google-maps-coloured-markers/

如果您将所有这些图标放在与地图相同的位置页面上，您只需在创建标记时使用适当的图标选项即可对标记进行着色：

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

这非常简单，也是我当前正在从事的项目所使用的方法。

Answer 2

Material Design

2019 年 3 月编辑现在具有程序化引脚颜色，

纯 JAVASCRIPT，无图像，支持标签

不再依赖已弃用的图表 API

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });

Answer 3

MapIconMaker：Google 地图 v2 的库

一种方法是使用 MapIconMaker（死链接）。有一个示例 这里（死链接）。 Google 地图默认图标的宽度为 20 像素，高度为 34 像素，因此您可以使用类似的东西来模拟：

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

您甚至可以将其包装在某些函数中，以使事情变得更加轻松：

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

这就是我个人用于创建的所有标记的方式。我更喜欢随心所欲地改变颜色。

更新：默认图标的十六进制颜色是“#FE7569”。此外，您可以在标记上设置图像，而不是使用新图标创建新标记。因此，如果您想要一个功能来突出显示，您可以使用上面的功能来使用类似的功能：

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker：Google Maps v3的库

由于V2不久前被V3取代，我想我应该更新这个答案。我创建了一个自定义标记库，可以在 V3 实用程序库 上找到该库此处（死链接）。它允许不同的颜色和形状，您也可以在标记上放置文本。它通过使用 Google Charts API 来工作，该 API 具有创建 Google 地图类型标记的方法。如果您想直接使用 Google Charts API，请随意查看源代码。

然而，该库的特点是它负责为您定义这些标记图像的可点击区域，因此，例如，带有文本的较长气泡将具有人们期望的可点击区域，例如 此示例（死链接） 。

Answer 4

由于地图 v2 已弃用，您可能对 v3 地图感兴趣：https://developers .google.com/maps/documentation/javascript/markers#simple_icons

对于 v2 地图：

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

您可以让一组逻辑执行所有“常规”引脚，另一组逻辑执行以下操作：使用定义的新标记的“特殊”引脚。

Answer 5

就我个人而言，我认为 Google Charts API 生成的图标看起来很棒，并且很容易动态定制。

请参阅我在 Google 地图上的回答API 3 - 默认（点）标记的自定义标记颜色

Answer 6

2023 解决方案：高级标记

Answer 7

我发现的最简单的方法是使用 BitmapDescriptorFactory.defaultMarker() 文档甚至有一个设置颜色的示例。从我自己的代码来看：

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

Answer 8

要自定义标记，您可以通过此在线工具进行操作： https://materialdesignicons.com/

在您的情况下，您需要的地图标记可在此处找到：https://materialdesignicons。 com/icon/map-marker，您可以在线自定义。

如果您只想将默认的红色更改为蓝色，可以加载此图标：http://maps.google.com/mapfiles/ms/icons/blue-dot.png

在此线程中提到过：https://stackoverflow.com/a/32651327/6381715

Answer 9

这篇相对较新的文章 提供了一个简单的示例，其中包含一组有限的 Google 地图彩色图标。

有关使用蓝色和橙色地图标记的真实网站示例，请参阅此网站并查看 Google 下的脚本地图。

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