Question

我第一次玩谷歌地图，所以我看了一篇关于CSS技巧的精彩教程：http://css-tricks.com/google-maps-slider/我更喜欢使用jQuery而不是纯JS，本教程是一个不错的方法单击列表中的某个位置以在地图中显示标记。

我喜欢这样，但我需要在标记处添加infowindows。我做了哪些，但是当我点击列表上的某个地方并且地图平移时，infowindow保持打开状态！我认为这是因为我需要将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()方法。

Google Maps API v3：单击DOM元素时关闭infowindow

1 个答案: