Question

我使用Google Maps JavaScript API v3, 在我的网络应用程序中显示地图的位置。

<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;
                });
            }
        }
    });
});

On first click it shows everything right. but when i click update button again then it doesn t show map right. I am attaching both screen shots. Can anybody tell me why is it happening. Thanks in advance. Map on first click enter image description here

当我再次点击“ img src=” 更新按钮时, 地图“ https:// i. statistic. net/ sfnvP. png” alt= “ 此处输入图像描述” / >

Answer 1

我正在从 ajax 成功代码中创建 map_convas_ 1 div, 并在更新完成时删除它。然后当用户单击更新按钮时再创建它。它的工作正常。

Answer 2

您不想反复创建新的地图实例, 因为已知的错误阻止了先前地图实例的记忆被垃圾收集。请检查这个问题和讨论及结果答案 : < a href="https:// stackoverflow. com/ q/ 10485582/ 1314132 > > 什么是摧毁一个映像场的正确方法?

这个问题的答案是,Google地图小组的Chris Broadfoot和Luke Mahe在谷歌地图办公室一小时课上播放了一段视频,这段视频解释了他们不支持使用涉及反复创建地图实例的案例。您最好保留一张地图的单一实例,并在您的用户会话中重新使用同一地图。

Answer 3

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

我使用 Jquery 来删除 div 代码。在我的情况中, 我使用jquery 对话框, 当我关闭对话框时, 我用原始 div 代码替换 div 的 html ( Google 地图显示地图 ) 。

我原来的Div代码是

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

我注意到在谷歌地图工作后, 它填满了Div很多东西和风格, 然后在我的Jquery. Dialog I m 替换了 html, 用我原来的Div 代码:

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

友情链接