如何更改谷歌地图 POI（餐厅、咖啡馆等）的默认标记颜色？ [关闭]答案

【问题标题】：How can I change the default marker color for google maps POIs (restaurant, cafe, etc.)? [closed]如何更改谷歌地图 POI（餐厅、咖啡馆等）的默认标记颜色？ [关闭]
【发布时间】：2021-02-04 15:27:21
【问题描述】：

我正在使用 Google Maps API 创建地图。我希望除我之外的所有标记都具有相同的颜色。这可能吗？

【问题讨论】：

标签： google-maps google-maps-api-2

【解决方案1】：

您可以使用Styled Map 自定义所有“POI”标记的颜色：

styles: [{
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#757575"
        }]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.medical",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#9e9e9e"
        }]
      },
      {
        "featureType": "poi.place_of_worship",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
    ],

proof of concept fiddle

代码 sn-p：

function initMap() {
  // Styles a map in night mode.
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 40.735,
      lng: -74.0
    },
    zoom: 17,
    styles: [{
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#757575"
        }]
      },
      {
        "featureType": "poi.attraction",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.business",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.government",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.medical",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [{
          "color": "#9e9e9e"
        }]
      },
      {
        "featureType": "poi.place_of_worship",
        "elementType": "labels.icon",
        "stylers": [{
            "color": "#3db5ff"
          },
          {
            "visibility": "on"
          }
        ]
      },
    ],
  });
  map.addListener('bounds_changed', function() {
    console.log(map.getCenter() + ":" + map.getZoom())
  })
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 90%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Maps - Blue POI Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

【讨论】：