如何更改 google 地图兴趣点（餐厅、咖啡馆等）的默认标记颜色？

Question

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

Answer 1

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

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

代码片段：

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>

如何更改 google 地图兴趣点（餐厅、咖啡馆等）的默认标记颜色？

How can I change the default marker color for google maps POIs (restaurant, cafe, etc.)?

google-maps

google-maps-api-2