Google Maps API v3：单击 DOM 元素时关闭信息窗口

Question

我是第一次使用 Google 地图，所以我在 CSS Tricks 上查看了一个不错的教程：http://css-tricks.com/google-maps-slider/ 我更喜欢使用 jQuery，而不是纯 JS，本教程提供了一种很好的点击方式在列表中的某个位置上显示地图中的标记。

我喜欢这种方式，但我需要将 infowindows 添加到标记中。我这样做了，但是当我单击列表上的一个地方并且地图平移时，信息窗口保持打开状态！我认为这是因为我需要将 infowindow.close() 附加到单击“#locations li”的事件中。

这是我的代码，在 document.ready 上运行：

  $(function() {

                  var chicago = new google.maps.LatLng(41.924832, -87.697456),
                      pointToMoveTo, 
                      first = true,
                      curMarker = new google.maps.Marker({}),
                      $el;

                  var myOptions = {
                      zoom: 10,
                      center: chicago,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                  var map = new google.maps.Map($("#map_canvas")[0], myOptions);

                  $("#locations li").click(function() {

                    $el = $(this);

                    if (!$el.hasClass("hover")) {

                      $("#locations li").removeClass("hover");
                      $el.addClass("hover");

                      if (!first) { 

                        // Clear current marker
                        curMarker.setMap(); 

                        // Set zoom back to Chicago level
                        // map.setZoom(10);
                      }

                      // Move (pan) map to new location
                      function move(){
                        pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
                        map.panTo(pointToMoveTo);

                      }

                      move();

                      // Add new marker
                      curMarker = new google.maps.Marker({
                          position: pointToMoveTo,
                          map: map
                      });


                      // Infowindow: contenido
                        var contentString = '<p>'+$el.find("h3").html()+'</p>';
                        contentString += 'hola' ;


                        var infowindow = new google.maps.InfoWindow(
                         { 
                           size: new google.maps.Size(150,50),
                           content: contentString
                         });


                        // On click, zoom map
                        google.maps.event.addListener(curMarker, 'click', function() {
                           //map.setZoom(14);

                           infowindow.open(map,curMarker);

                        });

Answer 1

您似乎正在为每个标记创建一个新的InfoWindow。 Quoting from the Google Maps API Docs:

如果您希望一次只显示一个信息窗口（就像 Google 地图上的行为一样），您只需创建一个信息窗口，您可以根据地图事件（例如用户点击）将其重新分配给不同的位置或标记)。

因此，您可能只想在初始化地图后创建一个InfoWindow 对象，然后按如下方式处理click 事件处理程序：

google.maps.event.addListener(curMarker, 'click', function() {
   infowindow.setContent(contentString);
   infowindow.open(map, curMarker);
});

那么InfoWindow 应该会在您单击新标记时自动关闭，而无需调用close() 方法。