javascript 谷歌地图动画或突出显示边界中的特定标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30454237/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
google map animate or highlight a particular marker in a bound
提问by Ramesh Murugesan
I have multiple markers in an bounds. I want to animate or highlight particular marker in an onclickevent from html.
我在一个边界中有多个标记。我想在onclick来自 html的事件中设置动画或突出显示特定标记。
Map code:
地图代码：
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);
I want to animate a particular marker in an map from a html onclick.
我想从 html 为地图中的特定标记设置动画onclick。
<button onclick="showme(0)">London Eye</button>
<button onclick="showme(1)">Palace of Westminster</button>
Js:
JS：
showme = function(index){
//How to animate a particular marker by an index?
}
回答by geocodezip
keep references to the markers:
var markers = []; // in the global scopeuse that reference to set the animation (or the icon) of the marker.
showme = function (index) { if (markers[index].getAnimation() != google.maps.Animation.BOUNCE) { markers[index].setAnimation(google.maps.Animation.BOUNCE); } else { markers[index].setAnimation(null); } }
保留对标记的引用：
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); } }
code snippet:
代码片段：
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>