javascript Google Maps API v3 标记下降和反弹动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11961718/
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 Maps API v3 marker drop and bounce animation
提问by debianek
I got this modified example code from google
我从谷歌那里得到了这个修改过的示例代码
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;
function initialize() {
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament,
icon: '/img/marker.png'
});
google.maps.event.addListener(marker, 'click', toggleBounce);
setTimeout(function() { marker.setAnimation(google.maps.Animation.BOUNCE); }, 2000);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
and I wonder if it is possible to change marker animation from DROP to BOUNCE after DROP animation stops?
我想知道在 DROP 动画停止后是否可以将标记动画从 DROP 更改为 BOUNCE？
I managed to change it using setTimeout() function but it does not do it smoothly. Any help will be appreciated.
我设法使用 setTimeout() 函数对其进行了更改，但操作并不顺利。任何帮助将不胜感激。
回答by Clint Brown
Try changing the marker animation on google.maps.event.addListener(map, 'idle', function ()...)- this will be called after the marker(s) are added.
尝试更改标记动画google.maps.event.addListener(map, 'idle', function ()...)- 这将在添加标记后调用。
document.write('<script src="https://maps.googleapis.com/maps/api/js">\x3C/script>');
window.onload = function () {
// Create map
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: new google.maps.LatLng(-33.87, 151.24),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
// Create marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-33.890542, 151.274856),
map: map,
animation: google.maps.Animation.DROP,
title: 'Bondi Beach'
});
// On idle, change marker animation to bounce
google.maps.event.addListener(map, 'idle', function () {
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}#map_canvas {
width: 300px;
height: 300px;
}<div id="map_canvas"></div>回答by Bill Blankenship
You could try this. :
你可以试试这个。：
google.maps.event.addListener(marker, "dragend", function(event) {
marker.setAnimation(google.maps.Animation.BOUNCE);
});
