检测谷歌地图被关闭，谷歌地图infowindow关闭

我想创建一个地图对话框，允许用户选择他或她所需的位置。检测谷歌地图被关闭，谷歌地图infowindow关闭

我有一个工作示例，位于http://jsfiddle.net/HCUPa/1/，源代码如下。

当infowindow关闭时（通过单击infowindow上的X），如何删除关联的标记？然后我需要从数组中删除infowindows名称，如果是这样，如何？

此外，当地图（或对话框，然后地图）关闭时，我如何检测它正在关闭，我应该清理任何资源，如果是的话，是什么和如何？

我试图使用addListeners两者，如我的示例中所示，但它不起作用。

最后，不是真正的我的正式问题，但我会很感激任何意见，我是否一般这样做是正确的。这是我在谷歌地图API的第一次尝试，我还是一个JavaScript新手，并希望任何建议，批评等

谢谢

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <style type="text/css"> 
      #googleMap { height: 100%;width: 100%;} 
      div.modify-title-bar div.ui-dialog-titlebar {border:0;background-image:none;background-color:transparent;padding:0;margin:0;} 
      #dialog-map,div.modify-title-bar {padding:0;margin:0;} 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <link type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" /> 
     <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 
     <script type="text/javascript"> 

      function createMap(geocoder,myCenter,address) { 

       var map = new google.maps.Map(document.getElementById("googleMap"),{center:myCenter,zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP}); 

       var marker = new google.maps.Marker({position: myCenter,map: map,}); 

       var infowindow = new google.maps.InfoWindow({content: '<span>'+address+'</span><br><button class="accept">Select Address</button>'}); 
       infowindow.open(map,marker); 

       google.maps.event.addListener(map, 'close', function(event) { 
        //How do I detect map closing, what and how should I clean up? Maybe move to dialog close? 
        alert('close map'); 
        delete geocoder,myCenter,address,map,marker,infowindow; 
       }); 

       google.maps.event.addListener(map, 'click', function(event) { 
        marker.setMap(null); 
        marker = new google.maps.Marker({ 
         position: event.latLng, 
         map: map, 
        }); 
        geocoder.geocode({location: event.latLng}, function(GeocoderResult, GeocoderStatus) { 
         infowindow.close(); 
         infowindow = new google.maps.InfoWindow({content: '<span>'+GeocoderResult[0].formatted_address+'</span><br><button class="accept">Select Address</button>'}); 
         infowindow.open(map,marker); 
        }); 
        google.maps.event.addListener(infowindow,'closeclick',function(){ 
         //How do I detect if infowindow is closed? Do I then need to remove the infowindows name from the array, and if so, how? 
         alert('Remove marker'); 
         marker.setMap(null); 
        }); 
       }); 
      } 

      $(function(){ 
       $("#googleMap").on("click", "button.accept", function(){ 
        $('#address').val($(this).parent().children('span').eq(0).text()); 
        $("#dialog-map").dialog('close'); 
       }); 

       $("#findIt").click(function(){$("#dialog-map").dialog("open");return false;}); 
       $("#dialog-map").dialog({ 
        autoOpen : false, 
        resizable : false, 
        height  : 500, 
        width  : 800, 
        modal  : true, 
        dialogClass : 'modify-title-bar', 
        open  : function() { 
         var address=$.trim($('#address').val()), 
         geocoder=new google.maps.Geocoder, 
         LatLng, 
         //Default LatLng 
         Ya=47.6204901, Za=-122.34964839999998, 
         //Give default address to limit geocoder calls 
         default_address='400 Broad Street, Seattle, WA 98109, USA'; 
         if(address) { 
          geocoder.geocode({address: address}, function(GeocoderResult, GeocoderStatus) { 
           if (GeocoderStatus=='OK') { 
            LatLng=GeocoderResult[0].geometry.location; 
           } 
           else { 
            LatLng=new google.maps.LatLng(Ya,Za); 
            adderss=default_address; 
           } 
           createMap(geocoder,LatLng,address); 

          }); 
         } 
         else { 
          LatLng=new google.maps.LatLng(Ya,Za); 
          createMap(geocoder,LatLng,default_address); 
         } 
        } 
       }); 

      }); 

     </script> 
    </head> 
    <body> 
     <button id="findIt">Find it on a map</button> 
     <input id="address" type="text" value="1600 Pennsylvania Avenue Northwest Washington, DC"> 
     <div id="dialog-map" title="Select a location"> 
      <div id="googleMap"></div> 
     </div> 
    </body> 
</html>

来源

2013-01-04 user1032531

创建侦听新功能infowindow close event

function infowindowClose(infowindow, marker) { 
    google.maps.event.addListenerOnce(infowindow, 'closeclick', function() { 
     marker.setMap(null); 
    }); 
}

调用每次创建一个新的infowindow。

Working Demo

您要为您第一次使用API做的很好。如果你想要多个标记和信息框，那么你需要做一些改动，否则就没问题。

来源

2013-01-04 16:11:41

谢谢Seain，为什么需要单独的功能？它与每个infowindow都是它自己的实例还是某个东西有关？另外，关闭对话框后真的不需要删除地图吗？似乎没有这样做就可以正常工作，但不知道这是否是一种好的做法。再次感谢！ – user1032531

@ user1032531无需删除地图。该功能的原因只是为了节省打字:) –

检测谷歌地图被关闭，谷歌地图infowindow关闭

回答

相关问题