javascript - 如何更改监听器内 Google map 圆形标记图标的描边颜色？

Question

我创建了一个 Google map 对象并向其中添加了这个标记。我希望笔触颜色在鼠标悬停时发生变化。

var circle = new google.maps.Marker({
  map: myGmapObject,
  position: {lat,lng},
  icon: {
    strokeColor: "#000",
    path: google.maps.SymbolPath.CIRCLE,
    scale: 7.5,
    anchor: new google.maps.Point(0,0)
  }
});

circle.addListener("mouseover",function(event){
      this.icon.strokeColor = "#fff";
});

但是当我将鼠标悬停在图标上时，描边颜色没有改变。

Answer 1

您需要获取现有图标，更改其笔触，然后在标记上设置新图标。

circle.addListener("mouseover", function(event) {
  var icon = this.getIcon();
  icon.strokeColor = "#fff";
  this.setIcon(icon);
});

proof of concept fiddle

代码片段:

function initMap() {
  // Create the map.
  var lat = 37.090
  var lng = -95.712;
  var myGmapObject = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: lat,
      lng: lng
    },
    mapTypeId: 'terrain'
  });

  var circle = new google.maps.Marker({
    map: myGmapObject,
    position: {
      lat,
      lng
    },
    icon: {
      strokeColor: "#000",
      path: google.maps.SymbolPath.CIRCLE,
      scale: 7.5,
      anchor: new google.maps.Point(0, 0)
    }
  });

  circle.addListener("mouseover", function(event) {
    var icon = this.getIcon();
    icon.strokeColor = "#fff";
    this.setIcon(icon);
  });
  circle.addListener("mouseout", function(event) {
    var icon = this.getIcon();
    icon.strokeColor = "#000";
    this.setIcon(icon);
  });
  myGmapObject.fitBounds(circle.getBounds());
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>