0

ユーザーが目的の場所を選択できるマップ ダイアログを作成しようとしています。

http://jsfiddle.net/HCUPa/1/に実例があります。ソースコードは以下のとおりです。

情報ウィンドウが (情報ウィンドウの [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>
4

1 に答える 1

1

infowindow close イベントをリッスンする新しい関数を作成します

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

新しい情報ウィンドウを作成するたびに呼び出します。

ワーキングデモ

初めて API を使用するのは順調です。複数のマーカーとインフォボックスが必要な場合は、いくつかの変更を加える必要がありますが、それ以外は問題ありません。

于 2013-01-04T16:11:41.703 に答える