在谷歌地图 API 中更改颜色多个标记答案

【问题标题】：Change color multiple marker in google maps API在谷歌地图 API 中更改颜色多个标记
【发布时间】：2022-03-12 21:05:05
【问题描述】：

我想问一下如何更改谷歌地图中标记的颜色。条件是，我有一个程序可以在谷歌地图中创建多个标记。但是如何给每个标记指定颜色呢？

这是我现在的代码，

var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;

function addMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
		label: labels[labelIndex++ % labels.length],
		icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
	map: map
	  });
  markers.push(marker);

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案1】：

一种方法是将颜色传递给addMarker 函数：

function addMarker(location, color) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    icon: 'http://maps.google.com/mapfiles/ms/icons/'+color+'.png',
    map: map
  });
  markers.push(marker);
}

proof of concept fiddle

代码 sn-p：

var markers = [];
var map;
var labels = 'ABCD';
var labelIndex = 0;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(40.7127837, -74.0059413),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  // New York, NY, USA (40.7127837, -74.0059413)
  // Newark, NJ, USA (40.735657, -74.1723667)
  // Jersey City, NJ, USA (40.72815749999999, -74.07764170000002)
  // Bayonne, NJ, USA (40.6687141, -74.11430910000001)

  addMarker({
    lat: 40.7127837,
    lng: -74.0059413
  }, "red");
  addMarker({
    lat: 40.735657,
    lng: -74.1723667
  }, "green");
  addMarker({
    lat: 40.7281575,
    lng: -74.0776417
  }, "yellow");
  addMarker({
    lat: 40.6687141,
    lng: -74.1143091
  }, "orange");
}
google.maps.event.addDomListener(window, "load", initialize);


function addMarker(location, color) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    icon: {
      url: 'http://maps.google.com/mapfiles/ms/icons/' + color + '.png',
      labelOrigin: new google.maps.Point(15, 10)
    },
    map: map
  });
  markers.push(marker);
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

【讨论】：