您可使用 addListener() 事件处理程序注册以接收事件通知。该方法有三个参数,一个对象,一个待侦听事件以及一个在指定事件发生时调用的函数。
以下代码可将用户事件和状态更改事件进行组合。我们可将事件处理程序附加到点击时对地图执行缩放操作的标记上。我们还针对“zoom”属性的更改在地图中添加了事件处理程序,并在收到 zoom_changed 事件时将地图移动到澳大利亚北领地的达尔文市:
效果演示
代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #map_canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script> <script> var map; function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var myOptions = { zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); google.maps.event.addListener(map, 'zoom_changed', function() { setTimeout(moveToDarwin, 3000); }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello World!" }); google.maps.event.addListener(marker, 'click', function() { map.setZoom(8); }); } function moveToDarwin() { var darwin = new google.maps.LatLng(-12.461334, 130.841904); map.setCenter(darwin); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>
延伸阅读
此文章所在专题列表如下:
- Google Maps API指南:在网页中嵌入GMaps
- Google Maps API指南:设置地图选项
- Google Maps API指南:地图标记与信息窗口
- Google Maps API指南:地图事件
- Google Maps API指南:点击添加标注
- Google Maps API指南:添加多个随机标注
本文地址:http://www.nowamagic.net/librarys/veda/detail/1690,欢迎访问原出处。
大家都在看