帶有多個標記的谷歌地圖中的停止標記動畫

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>