0

Web アプリケーションで地図上の場所を表示するために、Google Maps JavaScript API v3 を使用しています。私のhtmlには次のものがあります：

<script src="jquery-mainpage.js"></script>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB4LCwxrO5EzHnAQXCkP9fjREUEhOPCol4&sensor=false">
</script>

そして、これは、更新ボタンがクリックされたときにマップを作成する方法ですjquery-mainpage.js:

$('#updatebtn').unbind("click");
$('#updatebtn').bind('click', function(){
    var keystring = $('#key').text();
    $.ajax({
        type: 'POST',
        url: 'http://localhost:8888/jsgooglemaps',
        data: {keystr: keystring},
        success: function(result) {
            var obj = jQuery.parseJSON(result);
            var centerLatLng = new google.maps.LatLng(obj.centerLat, 
                obj.centerLong);
            var myOptions = {
                center: centerLatLng,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                draggable: true
            };

            var map = new google.maps.Map(
                document.getElementById("map_canvas_1"),
                myOptions);

            var markerArray = obj.locations;
            for(var i=0;i<markerArray.length;i++){
                var myLatlng = new google.maps.LatLng(
                    markerArray[i].latitude, 
                    markerArray[i].longitude);
                var marker = new google.maps.Marker({
                    clickable: true,
                    position: myLatlng,
                    map: map,
                    zIndex: i
                });
                google.maps.event.addListener(marker, "click", function() {
                    var tempLatLng = new google.maps.LatLng(0, 0);
                    this.setVisible(false); 
                    this.setPosition(tempLatLng);
                    var j = this.getZIndex();
                    markerArray[j].latitude = 0;
                    markerArray[j].longitude = 0;
                });
            }
        }
    });
});

最初のクリックで、すべてが正しく表示されます。しかし、更新ボタンをもう一度クリックすると、マップが正しく表示されません。両方のスクリーンショットを添付しています。なぜそれが起こっているのか誰か教えてください。前もって感謝します。最初のクリックでマップここに画像の説明を入力

更新ボタンをもう一度クリックしたときの地図ここに画像の説明を入力

4

3 に答える 3

2

You don't want to repeatedly create a new instance of the map, because there is a known bug that prevents the memory from previous map instances from being garbage collected. Check out this question and the discussion and resulting answers: What is the Proper Way to Destroy a Map Instance?

In the answer to that question, there is a link to a video presented during a Google Maps Office Hours session by Chris Broadfoot and Luke Mahe from the Google Maps team that explains they do not support use cases that involve repeated creation of map instances. You will be much better off keeping a single instance of the map and reusing the same map throughout your user's session.

于 2012-05-23T10:43:49.830 に答える
0

ajax 成功コードから map_convas_1 div を作成し、更新が完了したら削除しています。ユーザーが更新ボタンをクリックするたびに再度作成します。その正常に動作します。

于 2012-05-23T09:57:01.623 に答える