Javascript 检测到谷歌地图正在关闭和谷歌地图信息窗口正在关闭
我试图创建一个地图对话框，允许用户选择他或她想要的位置 我有一个位于的工作示例，源代码如下 当通过单击infowindow上的X关闭infowindow时，如何删除关联的标记？然后我是否需要从数组中删除infowindows名称，如果需要，如何删除 另外，当地图或对话框关闭，然后地图被关闭时，我如何检测到它被关闭，我应该清理任何资源，如果是，是什么，如何 如我的示例所示，我尝试将addListeners用于这两者，但它不起作用 最后，这不是我的正式问题，但我希望大家能告诉我，我的做法是否正确。这是我第一次尝试使用GoogleMapAPI，我还是一个JavaScript新手，如果有任何建议、批评等，我都会非常感激 多谢各位Javascript 检测到谷歌地图正在关闭和谷歌地图信息窗口正在关闭,javascript,google-maps,jquery-ui-dialog,Javascript,Google Maps,Jquery Ui Dialog,我试图创建一个地图对话框，允许用户选择他或她想要的位置 我有一个位于的工作示例，源代码如下 当通过单击infowindow上的X关闭infowindow时，如何删除关联的标记？然后我是否需要从数组中删除infowindows名称，如果需要，如何删除 另外，当地图或对话框关闭，然后地图被关闭时，我如何检测到它被关闭，我应该清理任何资源，如果是，是什么，如何 如我的示例所示，我尝试将addListeners用于这两者，但它不起作用 最后，这不是我的正式问题，但我希望大家能告诉我，我的做法是否正确。这
<!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>
创建侦听infowindow关闭事件的新函数
function infowindowClose(infowindow, marker) {
google.maps.event.addListenerOnce(infowindow, 'closeclick', function() {
marker.setMap(null);
});
}
您第一次使用API做得很好。如果您需要多个标记和信息框，则需要进行一些更改，否则就可以了。谢谢Seain，为什么需要单独的功能？它是否与每个infowindow都是它自己的实例或其他东西有关？另外，对话框关闭后是否真的不需要删除地图？不这样做似乎效果很好，但不知道这样做是否是一种好的做法。再次感谢@user1032531无需删除地图。此函数的作用仅在于保存键入内容：