Question

我正在使用GMAP3 jquery插件。

我使用以下示例添加infowindow 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.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

  });
}

Answer 1

如果需要在信息窗口外单击鼠标，则需要执行以下操作：

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

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

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

而不是像

那样创建信息窗口

$('#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);
}

有关地图选项take a look at this example

的参考

免责声明：我没有测试过这段代码，因此可能存在拼写错误，但这是在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>']
          }]
        }
      });

如果这个有效，请告诉我。

点击时关闭gmap3 infowindow

1 个答案: