活动（Events）

优质

小牛编辑

132浏览

2023-12-01

Google Maps JavaScript程序可以响应用户生成的各种事件。本章提供了演示如何在使用Google地图时执行事件处理的示例。

添加事件侦听器

您可以使用addListener()方法添加事件侦听器。它接受我们想要添加侦听器的对象名称，事件名称和处理程序事件等参数。

例子 (Example)

以下示例显示如何将事件侦听器添加到标记对象。每次双击标记时，程序会将地图的缩放值提高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>

在Click上打开信息窗口

以下代码在单击标记时打开信息窗口 -

<!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()方法删除现有侦听器。此方法接受侦听器对象，因此我们必须将侦听器分配给变量并将其传递给此方法。

例子 (Example)

以下代码显示了如何删除侦听器 -

<!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>