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

Я разрабатываю приложение на основе jQTouch для iPhone, и часть его использует API Google Maps (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, 
});

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

Мысли?

Заранее спасибо,

отметка

Добавлено Вот ссылка, которая точно покажет, что происходит: Снимок экрана эмулятора iPhone


iphone google-maps javascript jqtouch
person mpemburn    schedule 23.10.2010    source источник

Ответы (6)


arrow_upward
17
arrow_downward

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

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

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

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);
person Brett DeWoody    schedule 24.03.2011

arrow_upward
2
arrow_downward

Решение для корректного отображения карты заключается в выполнении вашего Maps-Code на pageAnimationEnd-Event 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>

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

person 2ndOfJuly    schedule 19.12.2011

arrow_upward
1
arrow_downward

см. мой ответ на Google Maps API 3 и jQTouch

в основном, ваш div #map_canvas не виден во время создания карты, так как div, в котором он находится, был скрыт jqtouch. API не может справиться с этим и ошибается в размере.

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

в любом случае, отложите построение карты до 'pageAnimationEnd'.

person ian    schedule 31.05.2011

arrow_upward
0
arrow_downward

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

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

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

person Kris Erickson    schedule 23.10.2010
comment
Спасибо, Крис. Проблема не в том, чтобы получить холст нужного размера, а в фактической карте на холсте. Я дал ссылку на скрин-шоу выше. - person mpemburn; 24.10.2010
comment
Хм, давайте. Я использовал почти такой же код, и моя единственная проблема заключалась в установке абсолютного размера на холсте. Тогда не могу помочь тебе с этим... - person Kris Erickson; 25.10.2010

arrow_upward
0
arrow_downward

Была точно такая же проблема с загрузкой карты с направлениями после загрузки контента с помощью AJAX и отображения и скрытия div map-canvas.

Вы должны инициировать событие изменения размера, как говорит Бретт ДеВуди, но я обнаружил, что моя глобальная переменная вышла за рамки, и мне пришлось ссылаться на них, то есть на переменную карты Google, ВНУТРИ моих функций явно в объекте окна. Вот что у меня есть в моем ответе directionsService:

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

    directionsDisplay.setDirections(response);

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

}
person Steven McElveen    schedule 06.04.2013

arrow_upward
0
arrow_downward

Решение Бретта ДеВуди сработало, но, поскольку я показываю карту в модальном режиме, единственным решением для меня было добавить setTimeout следующим образом:

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

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

person Strabek    schedule 12.03.2017