在具有多个标记的谷歌地图中停止标记动画 [英] stop marker animation in google maps with multiple markers

问题描述

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

目前，我可以停止相同的动画标记点击标记。

到目前为止，我已经完成了这项工作。

latlngarray是一个以对象格式表示经度和纬度的数组。

  var centerlatlng = {center lat lng are here}; 
 var zoomlevel = zoomlevel在这里; 
函数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 （{
位置：latlngarray [i]，
 map：map 
}）; 
 
 marker.addListener（'click'，function（）{
 toggleBounce（this）; 
 map.setZoom（10）; 
 map.setCenter（marker。 getPosition（））; 
}）; 
 
}} 
 
函数toggleBounce（ele）{
 if（ele.getAnimation（）！== null）{
 ele.setAnimation空值）; 
} else {
 ele.setAnimation（google.maps.Animation.BOUNCE）; 
}} 
  

解决方案

到所有标记，遍历该数组，取消所有标记上的动画，然后在点击标记上设置动画。

  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} //美国加利福尼亚州门洛帕克市];函数initMap（）{var markers = []; map = new google.maps.Map（document.getElementById（'map'），{center：centerlatlng，zoom：zoomlevel}）;如果（latlngarray.length> 0）{for（i = 0; i< latlngarray.length; i ++）{var marker = new google.maps.Marker（{position：latlngarray [i]，map：map}）; markers.push（标记）; 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（））;}）; }}}函数toggleBounce（ele）{if（ele.getAnimation（）！== null）{ele.setAnimation（null）; }其他{ele.setAnimation（google.maps.Animation.BOUNCE）; }} google.maps.event.addDomListener（window，load，initMap）;  

  html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：//   

I have a map integrated on my web page with marker animation. I have multiple markers in the map. I want to achieve something like, when any of the marker is clicked then other marker's animation should stop which is currently running.

Currently i am able to stop animation of the same marker on the marker click. There must be some marker object i should get in the case of multiple markers.

So far i have done this.

latlngarray is an array with lattitude and longitude in object format.

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

解决方案

Create an array with references to all the markers, iterate through that array cancelling the animation on all the markers, then set the animation on the clicked 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());
});

proof of concept fiddle

code snippet:

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>

这篇关于在具有多个标记的谷歌地图中停止标记动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！