google-maps - 如果重新加载 Google Map API v3 偏离中心(不是通常的 'resize' 东西)

Question

我阅读了所有类似的问题，但我的问题略有不同。第一次显示 JQuery Mobile 对话框时， map 在通常的 map_canvas div 中加载得很好，但如果重新加载对话框(即返回并单击按钮再次打开对话框)，它只会部分显示，缩小到 3 或 4，并以 div 的左上角为中心。

div 大小(已明确设置)没有变化，并且调用了 google.maps.event.trigger(map, 'resize');。

我还尝试在对话框显示后初始化 map ，但结果是一样的。

按钮代码:

$("#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但是这里不能使用提供的解决方案(缓存)，因为 map 可能需要更改

Answer 1

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

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

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