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

Question

我的网页上集成了一张带有标记动画的地图。我在地图上有多个标记。我想实现这样的事情，当单击任何标记时，其他标记的动画应该停止当前正在运行。

目前，我可以在标记单击时停止同一标记的动画。在多个标记的情况下，我应该得到一些标记对象。

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

latlngarray 是一个具有对象格式的 lattitude 和 longitude 的数组。

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

概念验证小提琴

代码片段：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>