1

我正在使用 GMAP3 jquery 插件。

我正在使用以下示例添加信息窗口http://gmap3.net/api/add-info-window.html

当鼠标点击离开信息窗口时，如何关闭信息窗口？

到目前为止我试过

var inside = false;
$('.infowindow').live('mouseenter',function(){ 
    inside=true; 
}).live('mouseleave', function(){ 
    inside=false; 
});
$("body").mouseup(function(){ 
    if(!inside) $('.infowindow').remove();
});

但这会使 infowindow 保持打开状态，但会从 infowindow 类中删除内容。

我一直在尝试 infowindow.close() 但无法正常工作？

编辑：这是 addinfowindow 函数

function addInfoWindow(lati, longi, name, datestring) {
  // get address
  $("#dispatcher").gmap3({
    action: 'getAddress',
    latLng: [lati, longi],
    callback: function (results) {
      content = results && results[1] ? results && results[1].formatted_address : 'No Address';

      // create infowindow       
      $('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

    } // end callback

  });
}
4

1 回答 1

1

如果需要在信息窗口外关闭鼠标单击操作，则以下代码应该可以工作：

var map = creteMap();
var infoWindow = createInfoWindow(map);

 google.maps.event.addListener(map, 'click', function() {
       infoWindow.setMap(null);
 });

注意createMap()和createInfoWIndow是抽象的。单击 infow 窗口本身时不会触发单击事件，因为它是“上方”地图对象。

而不是像这样创建信息窗口

$('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

您应该在 GMAP3 插件之外添加 infoWindow，例如：

function createInfoWindow(lati, longi, mapDivId,mapOptions, infowindowHtml){
  var map = new google.maps.Map(document.getElementById(mapDivId),mapOptions);

  var latLng = new google.maps.LatLng(lati,lngi);
  var infoWindow = new google.maps.InfoWindow();
  infoWindow.setContent(infowindowHtml);
  infoWindow.setPosition(latLng);
  google.maps.event.addListener(map, 'click', function() {
       infoWindow.setMap(null);
   });

  infoWindow.open(map);
}

有关地图选项的参考，请查看此示例

免责声明：我尚未测试此代码，因此可能存在拼写错误等，但这是在 GMAP3 插件之外执行此操作的方法。

编辑：使用 GMAP3 插件，它应该是可行的，虽然我还没有尝试过：

    $('#dispatcher').gmap3({
        action: 'addInfoWindow',
        latLng: [lati, longi],
        callback : function(infoWindowObj) { 
               if(infoWindowObj.getMap() != null){
                      infoWindowObj.getMap().addListener(map, 'click', function() {
                           infoWindowObj.setMap(null); });

               }
        },
        infowindow: {
          options: {
            content: name
          },
          events: {
            closeclick: function (infowindow, event) {
              //alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
            }
          },
          apply: [{
            action: 'setContent',
            args: ['<span class="infowindow">' + name + '<br />' + content + '<br />' + datestring + '<span>']
          }]
        }
      });

请让我知道这个是否有效。

于 2012-06-29T14:47:22.017 回答