[英]Google Maps API v3 marker drop and bounce animation
我從谷歌那里得到了修改后的示例代碼
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);
}
}
並且我想知道是否可以在DROP動畫停止后將標記動畫從DROP更改為BOUNCE?
我設法使用setTimeout()函數對其進行了更改,但它無法順利進行。 任何幫助將不勝感激。
嘗試更改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>
你可以試試看。 :
google.maps.event.addListener(marker, "dragend", function(event) {
marker.setAnimation(google.maps.Animation.BOUNCE);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.