标记动画

Question

我试图实现一个功能，当你点击它们时改变标记的颜色，当它关闭或者点击另一个标记时，它将返回到它的默认颜色。到目前为止，我已经得到我的代码来改变它的点击颜色，但我似乎不能将封闭的标记返回到原来的颜色。

marker.addListener('click', function() { 
      this.setIcon(defaultMarker); 
     }); 

     marker.addListener('click', function() { 
      this.setIcon(highlightedMarker); 
      }); 

     google.maps.event.addListener(infoWindow,'closeclick', function(){ 
       marker.setIcon(defaultMarker); 
       infoWindow.close(defaultMarker) 

     }) 

这里是我JS提琴https://jsfiddle.net/Jcook894/88j5ud5h/

Answer 1

你的问题是，你会在您的标记2个click事件和最后一个，标识的颜色设置为蓝色。

你可以点击很多次你想要的东西，最后总是蓝色。

所以，我：

• 去除两个标记click事件：marker.addListener('click', function(){})
• 移动在谷歌地图.setIcon(highlightedMarker)click听众
• 添加infowindow.closeclick事件：当信息窗口被关闭，事件被触发。
• 添加自定义属性您infowindow对象，它是对象：infoWindow.marker = marker;

注意：在此之前，新属性设置为信息窗口对象，检查它是否不为空。如果不是，实际上是强调了标记：设置默认颜色

if (infoWindow.marker) { 
    infoWindow.marker.setIcon(defaultMarker); 
} 

• 变化由一个默认的标记颜色在infowindow.closeclick事件：

---

google.maps.event.addListener(marker,'click', (function(marker, location){ 
    return function() { 
    console.log("that " + location); 
    streetViewService.getPanoramaByLocation(marker.position, streetRadius, getStreetData); 

     // Infowindow 
     // Marker 
     if (infoWindow.marker) { 
     infoWindow.marker.setIcon(defaultMarker); 
     } 
     infoWindow.marker = marker; 

     // Open 
     infoWindow.open(map, marker); 
     infoWindow.setContent("<div>" + marker.title + "</div><div id='pano'></div><div><a href=" + location.url + ">"+ location.url +"</a></div>"); 

     // Set the marker color 
    } 
})(marker, locationArray[i])); 

google.maps.event.addListener(infoWindow,'closeclick',function(){ 
    this.marker.setIcon(defaultMarker); 
}); 

Here the JSFiddle