地图初始化后更改 Google Maps API 标记标签的颜色答案

【问题标题】：Changing the color of Google Maps API marker labels after map initialization地图初始化后更改 Google Maps API 标记标签的颜色
【发布时间】：2018-11-25 15:18:55
【问题描述】：

我有一个 Google Maps API 初始化函数，其中 Marker 标签颜色（用于 markerPins 数组）设置为 transparent：

    markerPins[i] = new google.maps.Marker({

        position: position,
        map: map,
        optimized: false,
        icon: myPin,
        label: {
          color: 'transparent', // <= HERE
          fontSize: '11px',
          fontWeight: '900',
          text: 'Example Label'
        }
    });

这行得通。到目前为止，一切顺利。

稍后（在用户操作等之后）我想更改标记标签颜色。

我写了如下函数：

// CHANGE MARKER LABEL COLOR
function changeMarkerLabelColor(labelColor) {

    for (let i = 0; i < markerPins.length; i++ ) {

        markerPins[i].label.color = labelColor;

    }
}

而且它确实有效。但似乎只是在初始化地图时。

在地图初始化之后如何get 和set 标记标签颜色？

我很高兴部署 javascript 方法、CSS 方法或任何其他方法 - 但我已经搜索、测试和试验了几个小时，但到目前为止都空手而归。

【问题讨论】：

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

【解决方案1】：

没有记录在案的标记的label 属性。使用（记录在案的）.setLabel 和 .getLabel 函数：

function changeMarkerLabelColor(labelColor) {
  for (let i = 0; i < markerPins.length; i++ ) {
    var label = markerPins[i].getLabel();
    label.color = labelColor;
    markerPins[i].setLabel(label);
  }
}

proof of concept fiddle

代码 sn-p：

var locations = [
  { position: {lat: 37.4419, lng: -122.1419}}, 
  { position: {lat: 37.4529598, lng: -122.1817252}},
  { position: {lat: 37.4688273, lng: -122.141075}},
  ];
var markerPins = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (var i = 0; i < locations.length; i++) {
    markerPins[i] = new google.maps.Marker({

      position: locations[i].position,
      map: map,
      optimized: false,
      label: {
        color: 'transparent', // <= HERE
        fontSize: '11px',
        fontWeight: '900',
        text: 'Example Label'
      }
    });
  }
  setTimeout(function() {
    changeMarkerLabelColor("blue");
  }, 5000)
}
google.maps.event.addDomListener(window, "load", initialize);

function changeMarkerLabelColor(labelColor) {
  for (let i = 0; i < markerPins.length; i++) {
    var label = markerPins[i].getLabel();
    label.color = labelColor;
    markerPins[i].setLabel(label);

  }
}

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>

【讨论】：