谷歌地图API v3关闭中心如果重新加载（不是通常'调整大小'的事情）

Question

我读了所有类似的问题，但我的情况略有不同。第一次显示JQuery Mobile对话框时，地图会在通常的map_canvas div中正常加载，但是如果重新加载对话框（即返回并单击按钮再次打开对话框），它将仅部分显示，缩小到3或4并以div的左上角为中心。

div大小（显式设置）没有变化，并且在适当的情况下调用google.maps.event.trigger(map, 'resize');。

我还尝试在对话框显示后初始化地图但结果是相同的。

按钮代码：

$("#dest-map-button").click(function() {
            initializeMap(job_id,"map_canvas");
        }
);

功能：

function initializeMap(job_id, map_div){

    var pos = arrJobs[job_id].lat_lng.split(',');
    var job_pos = new google.maps.LatLng(pos[0],pos[1]);

    var driverLatLng = lat_lng.split(',');
    var driver_pos = new google.maps.LatLng(driverLatLng[0],driverLatLng[1]);

    var myOptions = {
        zoom: 18,
        center: driver_pos,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    }

    map = new google.maps.Map(document.getElementById(map_div), myOptions);

    var marker = new google.maps.Marker({
        position: job_pos,
        map: map,
        title: "Job"
    }); 

    var marker2 = new google.maps.Marker({
        position: driver_pos,
        map: map,
        title: "X",
    }); 

    google.maps.event.trigger(map, 'resize');
}   

HTML：

    <div data-role="page" id="dialog-destination-map" data-theme="e">
    <div data-role="content">
      <div id="map_canvas" style="height:300px; width:300px; position: relative; margin: 0px auto;">
      map_canvas
      </div>
    </div>
  </div>

有什么想法吗？

编辑：这个问题似乎描述了完全相同的问题：JQuery Mobile & Google Maps Glitch 但是这里提供的解决方案（缓存）不能用，因为地图可能需要更改

Answer 1

在尝试了其他一切之后，我终于偶然发现了pageshow事件。完成所有页面转换后调用initializeMap而不是单击按钮解决了问题：

$('#dialog-destination-map').live('pageshow',function(event){
    initializeMap(job_id,"map_canvas");
    }
);

我仍然想知道它是如何在第一次加载时工作的......

Answer 2

我同意@peter ..你不需要在每个pageshow事件上创建地图..相反，试试这个：

$(document).on("pagebeforechange", function()
{
    if(mapObj){
        center = mapObj.getCenter();
    }
});
$("#mapPage").bind("pageshow", function()
{
    google.maps.event.trigger(mapObj, "resize");
    if(center)mapObj.setCenter(center);
});

Answer 3

var driverLatLng正在使用lat_lng.split(',');初始化，之前尚未声明。

Answer 4

每次访问该页面时都无需创建新地图。事先创建地图，例如在pageinit。在pageshow：google.maps.event.trigger(mapObj, "resize");