Question

我注意到InfoWindow上的closeclick事件是在Google Maps V3中显示InfoWindow之前调用的。有没有人见过这个？错误？我对设计的误解？

考虑一个简单的例子：

<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 { 
                  }
    </style>

    <script type="text/javascript" 
            src="http://maps.google.com/maps/api/js?sensor=false"
            > 
    </script>

    <script type="text/javascript">

      function initialize() 
      {
        var newLatLng = new google.maps.LatLng(47.620513,-122.33963);

        var myOptions = { zoom: 12,
                          center: newLatLng,
                          draggingCursor: 'pointer',
                          draggableCursor: 'default',
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                          };     

        map = new google.maps.Map(  document.getElementById("map_canvas"),
                                         myOptions);

        google.maps.event.addListener(map, 'click', function(event) {
          placeMarker(event.latLng);
          });
    }

    function placeMarker(location)
    {
      // Create new marker
      var marker = new google.maps.Marker({
          position: location, 
          map: map
      });

      map.panTo(location);

      markerWindow(marker);
    }

    // Prompt new event marker form
    function markerWindow(marker)
    {
      var infoHtml = "testing";

      var infoW = new google.maps.InfoWindow({});

      infoW.setContent(infoHtml);

      google.maps.event.addListener(infoW, 'closeclick', closeMarker());

      infoW.open(map, marker);
    }

    function closeMarker()
    {
      window.alert("closeclick fired");
    }

    </script>
  </head>
  <body onload='initialize()'>
  <div id="map_canvas" style="   position:absolute;
                                 width:400px; 
                                 height:400px;"
                                 >
       </div>
  </body>
</html>

如果你运行这个例子，将在显示InfoWindow之前调用closeclick，而不是在创建它之后以及按InfoWindow气泡右上角的“x”按钮。这是一个错误（他们的或他的）或我是否误解了设计/使用？

环境：Windows Vista（32位），Firefox 3.6.10

Answer 1

猜猜你自己已经解决了这个问题，但对于那些有同样问题的人来说。尝试将该函数作为参考传递。所以不要这样：

google.maps.event.addListener(infoW, 'closeclick', closeMarker());

这样做：

google.maps.event.addListener(infoW, 'closeclick', closeMarker);

请注意，您的代码类似于：

google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
});

但是匿名function(event)是一个特殊情况，它允许在函数名后面使用（）。

Answer 2

您还可以将侦听器添加到infowindow本身。

下面是一个受Google Maps Javascript文档启发的示例：

   let contentString=
        '<div id="content">' +
        '<div id="siteNotice">' +
        "</div>" +
        '<h1 id="firstHeading" class="firstHeading">Hello World !</h1>' +
        '<div id="bodyContent">' +
        "<p><b>?  ?‍?  ?  ?</b>," +
        "</p>" +
        "<p>" +
        "</p>" +
        "</div>" +
        "</div>";

    const infowindow = new google.maps.InfoWindow({
    content: contentString
    })


    infowindow.addListener("closeclick", () => {
    console.log("closeclick");
    });

也许您会在此示例中找到一些东西。

GoogleMaps V3中的InfoWindow closeclick事件即将被解雇？

2 个答案: