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

我有一个边界的多个标记.我想在html的onclick事件中设置动画或突出显示特定标记.

地图代码：

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

我想通过html onclick为地图中的特定标记设置动画.

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

JS：

showme = function(index){
   //How to animate a particular marker by an index?
}

解决方法

>保持对标记的引用：

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

>使用该引用设置标记的动画(​​或图标).

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

代码段：

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.124755]
  ];
  var bounds = new google.maps.LatLngBounds();
  list.forEach(function(data,array) {

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(list[index][0],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);
  }
}

html,body,#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<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>