如何更改侦听器内 Google Maps 圆形标记图标的笔触颜色？

Question

我创建了一个谷歌地图 object 并将这个标记添加到其中。 我希望在鼠标悬停时更改笔触颜色。

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);
});

概念证明小提琴

代码片段：

 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>

Answer 2

因此，由于圆形被声明为新的谷歌地图标记，我认为必须以这种方式声明监听器，它必须从谷歌地图传递到 dom。

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

您可以尝试查看我遇到的这个答案

将鼠标悬停在 map 外侧的元素上更改谷歌地图 v3 标记的颜色