google map api
浏览器
// The following example creates a marker in Stockholm, Sweden// using a DROP animation. Clicking on the marker will toggle// the animation between a BOUNCE animation and no 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: 13, 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 }); google.maps.event.addListener(marker, 'click', toggleBounce);}function toggleBounce() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); }}google.maps.event.addDomListener(window, 'load', initialize);因为只能上传静态图片,所以不能很直观的看到 '上下跳动' 的效果.请谅解.
var stockholm = new google.maps.LatLng(59.32522, 18.07002);var parliament = new google.maps.LatLng(59.327383, 18.06747); 第一个位置坐标是地图加载虚牺时初始显示 mark 标记的位置.第二个位置坐标是点击地图上 mark 标记后,往上跳的顶部位置.
google.maps.event.addListener(marker, 'click', toggleBounce);当 toggleBounce 函数添加到地图的 marker 标记改董的 click 事件上,当点击该 marker 标记,会自动调用 toggleBounce 函数.
function toggleBounce() { if (marker.getAnimation() != null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); }}这个函数是一个丽彩羞封装了 click 点击事件.当我们第一次点击时,因为 marker.getAnimation() 是不为空的,所以会执行 marker.setAnimation(google.maps.Animation.BOUNCE);从而实现动画效果.当你再次点击 mark 标记时,因为 getAnimaton() 不为 null , 所以为执行marker.setAnimation(null); 这句话的意思就是停止动画(停止上下跳动).
如果你认为本经验对你有所帮助,投下票给小编,让小编有更大的动力去帮助更多的人.收藏是最好的啦.如果你对小篇的经验有想说的话,请给小编评论!
如果你觉得这篇文章帮到了你,请点击页面右下方的箭头,分享给你的朋友!