Google Map V3 не центрируется, отображает только часть карты

Question

Я разрабатываю приложение на базе jQTouch для iPhone, а часть его использует API Карт Google (V3). Я хочу иметь возможность передавать координаты геолокации на карту и сосредоточить ее по центру с маркером. То, что я получаю сейчас, это карта с правильным уровнем масштабирования, но желаемая центральная точка появляется в верхнем правом углу. Он также показывает только примерно треть области карты (остальное - серое), и при повороте или масштабировании он ведет себя несколько неустойчиво. Вот код:

var coords = { latitude : "35.510630", longitude : "-79.255374" }; 
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map($("#map_canvas").get(0), myOptions); 
var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
});  

BTW: Он выглядит и ведет себя так же и на других платформах/браузерах, а также.

Мысли?

Спасибо заранее,

Все

---

Добавлена ​​ Вот ссылка, которая будет показывать именно то, что происходит: Screen shot of iPhone emulator

Answer 1

Убедитесь, что вы установили ширина/высота холст абсолютно (т.е.)

$("#map_canvas").width(window.innerWidth).height(window.innerHeight - $('.toolbar').height()); 

Конечно, предполагается, что панель инструментов jqtouch запущена и запущена ...

Answer 2

Я предполагаю, что вы используете AJAX для отображения карты или скрыть карту в какой-то момент, а затем отобразить ее на основе действие?

В этом случае Google не знает размер контейнера карты, и он будет рисовать только часть карты, обычно нецентрированную.

Чтобы исправить это, измените размер карты, а затем перецентрируйте ее на лат/lng. Что-то вроде этого:

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

// Recenter the map now that it's been redrawn    
var reCenter = new google.maps.LatLng(yourLat, yourLng); 
map.setCenter(reCenter); 

Answer 3

увидеть мой ответ на Google Maps API 3 & jQTouch

в основном, ваш #map_canvas ДИВ не видно в то время вы Построив карту как DIV он находится в скрыта jqtouch. api не может справиться с этим и получить размер неправильно.

было бы намного проще, если gmaps v3 разрешал устанавливать явный размер в конструкторе (как это делал v2).

в любом случае, задержка, отображающая карту до 'pageAnimationEnd'.

Answer 4

Решение для правильной настройки карты - это выполнить ваш код карты на страницеAnimationEnd-событие jQTouch.

Пример внутри страницы #div:

<div id="map_canvas" style="width:100%; height:100%; min-height:400px; background:#ccc;"></div> 
    <script type="text/javascript"> 

    $('#map').bind('pageAnimationEnd', function() { 

     var mapOptions = { 
      zoom: 13, 
      disableDefaultUI: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
        var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 

        var marker = new google.maps.Marker({ 
         map: map, 
         draggable: false, 
         position: pos 
        }); 

        map.setCenter(pos); 
       }, function() { 
        console.log('Device Environment Capable of Geolocation but not Available - Geolocation failed'); 
       } 
      ); 
     } else { 
      console.log('Device Environment Not Capable of Geolocation - Geolocation failed'); 
     } 
    }); 
    </script> 

Хотя, я считаю себя возникли проблемы, чтобы сделать карты в полноэкранном режиме-высоту. Любая помощь в этом случае оценивается. Обратите внимание, что im использует расширение DataZombies для фиксированной навигации нижнего колонтитула.

Answer 5

Если бы такая же проблема возникла, загрузив карту с инструкциями после загрузки содержимого с помощью AJAX и показывая и скрывая div-карту canvas.

Вы должны вызвать событие изменения размера, как говорит Бретт ДеВуди, но я обнаружил, что моя глобальная переменная вышла за пределы области действия, и мне пришлось ссылаться на них, то есть на переменную карты google, INSIDE мои функции явно на объект окна , Вот что у меня есть в моем DirectionsService ответ: решение

if (status == google.maps.DirectionsStatus.OK) { 

    directionsDisplay.setDirections(response); 

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

} 

Answer 6

Бретта DeWoody работал, но, как я показываю карту в модальной единственное решение для меня было добавить SetTimeout так:

setTimeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    var reCenter = new google.maps.LatLng(lat, lng); 
    map.setCenter(reCenter); 
}, 500); 

После добавления setTimeout карта отлично отображает и центрирует.