为什么 Google Maps JavaScript 在我第二次点击时没有正确显示地图？答案

【问题标题】：Why Google Maps JavaScript is not showing a map right when i click it second time?为什么 Google Maps JavaScript 在我第二次点击时没有正确显示地图？
【发布时间】：2012-05-29 18:15:30
【问题描述】：

我正在使用 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;
                });
            }
        }
    });
});

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

当我再次点击更新按钮时的地图

【问题讨论】：

真的每次点击按钮都需要初始化地图吗？
我正在更新位置。我应该只初始化一次地图，然后在上面放置标记。你是这个意思吗？一个用户可以有不同的位置。每次更改中心点时如何初始化地图？
是的。一次又一次地初始化地图将是多余的。如果您需要在更新后删除之前添加的标记，您可以使用此方法marker.setMap(null)。我还注意到您添加了draggable: true。所以你可能还需要检查是否有导致问题的 CSS 代码。
如果我在文档开头初始化地图一次。然后即使第一次点击它也不会显示正确的地图:(
好的，尝试在脚本的开头声明map 变量，例如var map;。并从 ajax 成功代码中丢失 'var map = new google.maps.Map(...'，只需使用 map = new google.maps.Map(...。

标签： javascript google-maps google-maps-api-3

【解决方案1】：

我正在从 ajax 成功代码创建 map_convas_1 div，并在更新完成后将其删除。然后每当用户单击更新按钮时再次创建它。它工作正常。

【讨论】：

@Pisceam 请出示您的代码，我也遇到了同样的问题

【解决方案2】：

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

在该问题的答案中，Google 地图团队的 Chris Broadfoot 和 Luke Mahe 在 Google 地图办公时间会议期间提供了一个视频链接，该视频解释了他们不支持涉及重复创建地图的用例实例。您最好保留地图的单个实例并在整个用户会话中重复使用相同的地图。

【讨论】：

【解决方案3】：

它有效。非常感谢，您的“从 div 中删除代码”选项对我有用，我的问题是第二次它不起作用，如果我调整屏幕大小它可以工作，但不是用户调整屏幕大小的自然方式看地图。

我正在使用 Jquery 删除 div 代码。在我的情况下，我使用的是 jquery 对话框，然后当我关闭对话框时，我将 div 中的 html（谷歌地图显示地图）替换为原始 div 代码。

我原来的 div 代码是

<div id="mapaLocalsub" style="width:500px; height:450px; " ></div>

我注意到，在谷歌地图工作后，它用很多东西和样式填充了 div，然后在我的 Jquery.dialog 的关闭函数中，我用我原来的 div 代码替换了 html：

$( "#mapaLocal" ).dialog({
      height: 450,
      width: 500,
      modal: true,
      close: function() {
      $( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");
      }
});

当然，您可以在关闭函数或创建地图之前调用的函数中使用 Jquery html 方法，希望对您有所帮助。

$( "#mapaLocal" ).html("<div id=\"mapaLocalsub\" style=\"width:500px;     height:450px; \" ></div>");

【讨论】：