谷歌地圖API v3偏離中心如果重新加載（不是通常的'調整大小'的東西）

我讀過所有類似的問題，但我的情況略有不同。第一次顯示JQuery Mobile對話框時，地圖會在通常的map_canvas div內加載，但如果重新加載對話框（即返回並單擊該按鈕以再次打開該對話框），它將僅顯示一部分，縮小到3或4，並圍繞div的左上角。谷歌地圖API v3偏離中心如果重新加載（不是通常的'調整大小'的東西）

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 但是在這裏不能用作地圖可能需要更改所提供的解決方案（高速緩存）

來源

2012-03-28 chris

嘗試其他所有事情後，我終於偶然發現了pageshow事件。調用initializeMap之後的所有頁面轉換完成，而點擊該按鈕時相比，解決了這個問題：

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

我仍然不知道怎麼就在第一負載然後工作...

來源

2012-03-30 01:31:42 chris

var driverLatLng正在與lat_lng.split(',');這不是招」初始化之前已被宣佈。

來源

2012-03-29 00:16:15 msonsona

這是一個全局變量。正如我所提到的，這在第一次加載時起作用。 – chris 2012-03-29 10:14:51

你不每次訪問該頁面時都需要創建一張新地圖。事先創建地圖，例如在pageinit。在pageshow：google.maps.event.trigger(mapObj, "resize");

來源

2012-10-14 21:19:56

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

來源

2012-11-16 17:12:01 achu

夥計們這不適合我可以請你幫忙嗎？這裏是我的問題http://stackoverflow.com/questions/23669869/how-change-the-css-of-control-buttons-of-google-map-in-jqm – Vikram 2014-05-15 11:50:33

谷歌地圖API v3偏離中心如果重新加載（不是通常的'調整大小'的東西）

回答

相關問題