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

Question

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

地图代码:

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

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

工作小提琴

代码段:

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

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>