1

GMAP3jqueryプラグインを使用しています。

次の例を使用して、情報ウィンドウを追加しています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.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は抽象化されていることに注意してください。クリックイベントは、マップオブジェクトの「上」にあるため、情報ウィンドウ自体をクリックしてもトリガーされません。

次のような情報ウィンドウを作成する代わりに

$('#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 に答える