Question

我正在尝试创建一个地图对话框，允许用户选择他或她想要的位置。

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

当infowindow关闭时（通过单击infowindow上的X），如何删除相关标记？那么我是否需要从数组中删除infowindows名称，如果是，那该怎么办？

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

我尝试为两者使用addListeners，如我的示例所示，但它无效。

最后，不是我的正式问题，但我很感激任何建议我是否一般都这样做。这是我第一次尝试Google地图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>

Answer 1

创建一个侦听infowindow close事件的新函数

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

每次创建新的信息窗时都要调用它。

Working Demo

您第一次使用API时效果很好。如果您需要多个标记和信息框，那么您需要进行一些更改，否则就可以了。

检测Google地图已关闭且Google地图信息窗口已关闭

1 个答案: