javascript - 为什么当我第二次点击 Google Maps JavaScript 时，它没有正确显示 map ？

Question

我正在使用 Google Maps JavaScript API v3 在我的 Web 应用程序中的 map 上显示位置。在我的 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 中单击更新按钮时制作 map 的方式:

$('#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;
                });
            }
        }
    });
});

第一次单击时，它显示一切正确。但是当我再次单击更新按钮时，它不会正确显示 map 。我附上了两个屏幕截图。谁能告诉我为什么会这样。提前致谢。 首次点击 map

当我再次单击更新按钮时映射

Answer 1

您不想重复创建 map 的新实例，因为存在一个已知的错误，该错误会阻止以前的 map 实例的内存被垃圾收集。查看此问题以及讨论和结果答案:What is the Proper Way to Destroy a Map Instance?

在该问题的答案中，有一个指向 Google map 团队的 Chris Broadfoot 和 Luke Mahe 在 Google map 办公时间 session 期间演示的视频的链接，其中解释了他们不支持涉及重复创建 map 的用例实例。保留 map 的单个实例并在整个用户 session 中重复使用相同的 map 会更好。