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

【问题标题】：stop marker animation in google maps with multiple markers在具有多个标记的谷歌地图中停止标记动画
【发布时间】：2021-09-20 00:05:25
【问题描述】：

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

目前我可以在标记点击时停止相同标记的动画。如果有多个标记，我应该得到一些标记对象。

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

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

fiddle

【问题讨论】：

标签： jquery google-maps

【解决方案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

代码 sn-p：

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>

【讨论】：