Google Maps JavaScript程序可以响应用户生成的各种事件.本章提供了演示如何在使用Google地图时执行事件处理的示例.
您可以使用以下命令添加事件侦听器方法 addListener().它接受我们想要添加监听器的对象名称,事件名称和处理程序事件等参数.
以下示例显示如何将事件侦听器添加到标记对象.每当我们双击标记时,程序会将地图的缩放值提高5.
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' }); marker.setMap(map); //Zoom to 7 when clicked on marker google.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); }); } </script> </head> <body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body> </html>
以下代码在单击标记时打开一个信息窗口:
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center:myCenter, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new google.maps.Marker({ position:myCenter, }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:"Hi" }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } </script> </head> <body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body> </html>
您可以使用方法removeListener()删除现有的侦听器。 此方法接受侦听器对象,因此我们必须将侦听器分配给变量并将其传递给此方法。
以下代码显示了如何删除监听器:
<!DOCTYPE html> <html> <head> <script src = "https://maps.googleapis.com/maps/api/js"></script> <script> var myCenter = new google.maps.LatLng(17.433053, 78.412172); function loadMap(){ var mapProp = { center:myCenter, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker = new google.maps.Marker({ position:myCenter, }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:"Hi" }); var myListener = google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); google.maps.event.removeListener(myListener); } </script> </head> <body onload = "loadMap()"> <div id = "googleMap" style = "width:580px; height:400px;"></div> </body> </html>