javascript - 谷歌地图动画或突出显示边界中的特定标记

Question

我在一个边界内有多个标记。我想在 html 的 onclick 事件中对特定标记进行动画处理或突出显示。

map 代码:

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 为 map 中的特定标记设置动画。

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

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.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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></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>