谷歌地图动画或突出显示绑定中的特定标记

Question

我在边界中有多个标记。我想在html中的display: none;事件中设置动画或突出显示特定标记。

地图代码：

onclick

我想通过html var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP }); list = [ [51.503454,-0.119562], [51.499633,-0.124755] ]; var bounds = new google.maps.LatLngBounds(); list.forEach(function(data, index, array){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(list[index][0],list[index][1]), map: map }); bounds.extend(marker.position); }); map.fitBounds(bounds); 为地图中的特定标记设置动画。

onclick

JS：

<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>

Answer 1

1. 保留对标记的引用：

   var markers = []; // in the global scope
   

2. 使用该引用设置标记的动画（​​或图标）。

   showme = function (index) {
       if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) {
           markers[index].setAnimation(google.maps.Animation.BOUNCE);
       } else {
           markers[index].setAnimation(null);
       }
   }
   

working fiddle

代码段：

＆＃13;
＆＃13;
var geocoder;
var map;
var markers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  list = [
    [51.503454, -0.119562],
    [51.499633, -0.124755]
  ];
  var bounds = new google.maps.LatLngBounds();
  list.forEach(function(data, index, array) {

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(list[index][0], list[index][1]),
      map: map
    });
    markers.push(marker);

    bounds.extend(marker.position);
  });
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);

showme = function(index) {
  if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) {
    markers[index].setAnimation(google.maps.Animation.BOUNCE);
  } else {
    markers[index].setAnimation(null);
  }
}
＆＃13;
html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
＆＃13;
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
＆＃13;
＆＃13;
＆＃13;