带有多个标记的谷歌地图中的停止标记动画

Question

我有一个地图与标记动画集成在我的网页上。我在地图上有多个标记。我想实现类似的效果，当点击任何一个标记时，其他标记的动画应该停止，当前正在运行。

目前我能够停止标记点击上相同标记的动画。在多个标记的情况下，我应该得到一些标记对象。

到目前为止，我已经做到了这一点。

latlngarray是一个具有对象格式的经度和纬度的数组。

var centerlatlng={center lat lng are here}; 
var zoomlevel=zoomlevel is here; 
function initMap(){ 
map = new google.maps.Map(document.getElementById('map'),{ 
    center: centerlatlng, 
    zoom: zoomlevel 
}); 

if(latlngarray.length > 0){ 
    for(i=0; i < latlngarray.length; i++){ 
     marker = new google.maps.Marker({ 
      position: latlngarray[i], 
      map: map 
     }); 

     marker.addListener('click', function(){ 
      toggleBounce(this); 
      map.setZoom(10); 
      map.setCenter(marker.getPosition()); 
     }); 
    } 
}} 

function toggleBounce(ele){ 
if(ele.getAnimation() !== null){ 
    ele.setAnimation(null); 
}else{ 
    ele.setAnimation(google.maps.Animation.BOUNCE); 
}} 

Answer 1

创建一个引用所有标记的数组，迭代该数组，取消所有标记上的动画，然后在单击的标记上设置动画。

marker.addListener('click', function() { 
    for (var i = 0; i < markers.length; i++) { 
    markers[i].setAnimation(null); 
    } 
    toggleBounce(this); 
    map.setZoom(10); 
    map.setCenter(marker.getPosition()); 
}); 

proof of concept fiddle

代码片段：

var map; 
 
var centerlatlng = { 
 
    lat: 37.4419, 
 
    lng: -122.1419 
 
}; 
 
var zoomlevel = 13; 
 
var latlngarray = [{lat: 37.4418834, lng: -122.1430195}, // Palo Alto, CA, USA 
 
    {lat: 37.4688273, lng: -122.1410751}, //East Palo Alto, CA, USA 
 
    {lat: 37.424106, lng: -122.1660756}, // Stanford, CA, USA 
 
    {lat: 37.4529598, lng: -122.1817252} // Menlo Park, CA, USA 
 
]; 
 

 
function initMap() { 
 
    var markers = []; 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: centerlatlng, 
 
    zoom: zoomlevel 
 
    }); 
 

 
    if (latlngarray.length > 0) { 
 
    for (i = 0; i < latlngarray.length; i++) { 
 
     var marker = new google.maps.Marker({ 
 
     position: latlngarray[i], 
 
     map: map 
 
     }); 
 
     markers.push(marker); 
 

 
     marker.addListener('click', function() { 
 
     for (var i = 0; i < markers.length; i++) { 
 
      markers[i].setAnimation(null); 
 
     } 
 
     toggleBounce(this); 
 
     map.setZoom(10); 
 
     map.setCenter(marker.getPosition()); 
 
     }); 
 
    } 
 
    } 
 
} 
 

 
function toggleBounce(ele) { 
 
    if (ele.getAnimation() !== null) { 
 
    ele.setAnimation(null); 
 
    } else { 
 
    ele.setAnimation(google.maps.Animation.BOUNCE); 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>