Google Map API v3 не в центре, если перезагружен (не обычная вещь «изменить размер») - PullRequest
Новая
       33

Google Map API v3 не в центре, если перезагружен (не обычная вещь «изменить размер»)

3 голосов
/ 28 марта 2012

Я прочитал все подобные вопросы, но мой немного отличается. При первом отображении диалогового окна JQuery Mobile карта загружается нормально внутри обычного div map_canvas, но если диалоговое окно перезагружается (т. Е. Вернитесь назад и нажмите кнопку, чтобы снова открыть диалоговое окно), оно отображается только частично, уменьшено на 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 Но предоставленное решение (кэширование) не может быть использовано здесь, так как карта может потребоваться изменить

Ответы [ 4 ]

3 голосов
/ 30 марта 2012

Попробовав все остальное, я наконец наткнулся на событие pageshow. Вызов initializeMap после всех переходов страницы, а не после нажатия кнопки, решил проблему: 

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

Мне все еще интересно, как получилось, что он работал при первой загрузке ...

2 голосов
/ 16 ноября 2012

Я согласен с @peter. Вам не нужно создавать карту для каждого события просмотра страницы. Вместо этого попробуйте следующее: 

$(document).on("pagebeforechange", function()
{
    if(mapObj){
        center = mapObj.getCenter();
    }
});
$("#mapPage").bind("pageshow", function()
{
    google.maps.event.trigger(mapObj, "resize");
    if(center)mapObj.setCenter(center);
});
0 голосов
/ 15 октября 2012

Вам не нужно создавать новую карту каждый раз, когда вы посещаете страницу.Создайте карту заранее, например, на pageinit.Вкл pageshow: google.maps.event.trigger(mapObj, "resize");

0 голосов
/ 29 марта 2012

var driverLatLng инициализируется с lat_lng.split(',');, который не был объявлен ранее.

...