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

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

9 голосов
/ 23 октября 2010

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

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

Мысли

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

Mark

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

Ответы [ 6 ]

17 голосов
/ 24 марта 2011

Полагаю, вы используете 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);
2 голосов
/ 19 декабря 2011

Решение для правильного отображения карты состоит в том, чтобы выполнить ваш код карты на 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 для фиксированной навигации нижнего колонтитула.

1 голос
/ 31 мая 2011

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

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

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

в любом случае отложить создание карты до «pageAnimationEnd».

0 голосов
/ 12 марта 2017

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

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

После добавления setTimeout карта прекрасно отрисовывается и центрируется.1004 *

0 голосов
/ 06 апреля 2013

Была та же самая проблема загрузки карты с указаниями после загрузки содержимого в AJAX и показа и скрытия элемента map-canvas.

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

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

    directionsDisplay.setDirections(response);

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

}
0 голосов
/ 23 октября 2010

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

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

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

...