Google Map V3 không định tâm, chỉ hiển thị một phần bản đồ

Question

Tôi đang phát triển một ứng dụng dựa trên jQTouch cho iPhone và một phần của ứng dụng này sử dụng API Google Maps (V3). Tôi muốn có thể chuyển tọa độ vị trí địa lý đến bản đồ và đặt nó vào vị trí trung tâm với một điểm đánh dấu. Những gì tôi nhận được bây giờ là bản đồ ở mức thu phóng thích hợp nhưng điểm trung tâm mong muốn xuất hiện ở góc trên bên phải. Nó cũng chỉ hiển thị khoảng một phần ba diện tích bản đồ (phần còn lại là màu xám) và nó hoạt động hơi thất thường khi bạn xoay hoặc thu phóng. Đây là mã:

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: Có vẻ và hoạt động giống nhau trên các nền tảng/trình duyệt khác.

Suy nghĩ?

Cảm ơn trước,

Đánh dấu

---

Added Dưới đây là một liên kết mà sẽ hiển thị chính xác những gì đang xảy ra: Screen shot of iPhone emulator

Answer 1

Hãy chắc chắn rằng bạn đã thiết lập chiều rộng/chiều cao của canvas hoàn toàn (tức là)

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

Tất nhiên, giả sử bạn có thanh công cụ jqtouch và chạy ...

Answer 2

Tôi đoán bạn đang sử dụng AJAX để hiển thị bản đồ hoặc ẩn bản đồ tại một số thời điểm và sau đó hiển thị nó dựa trên hoạt động?

Trong trường hợp này, Google không biết kích thước của vùng chứa bản đồ và nó sẽ chỉ vẽ một phần của bản đồ, thường là không tập trung.

Để khắc phục điều này, hãy đổi kích thước bản đồ, sau đó căn giữa lại trên lat/lng của bạn. Một cái gì đó như thế này:

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

xem câu trả lời của tôi trên Google Maps API 3 & jQTouch

về cơ bản, div #map_canvas của bạn không hiển thị tại thời điểm bạn đang xây dựng bản đồ như div nó ở đã được ẩn bởi jqtouch. api không thể đối phó với điều này và nhận được kích thước sai.

sẽ dễ dàng hơn nhiều nếu gmaps v3 được phép đặt kích thước rõ ràng trong hàm tạo (như v2 đã làm).

anyway, trì hoãn việc lập bản đồ cho đến 'pageAnimationEnd'.

Answer 4

Giải pháp để đưa bản đồ được đổi mới chính xác là thực thi Mã Maps của bạn trên pageAnimationEnd-Event of jQTouch.

Ví dụ trong trang #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> 

Mặc dù, tôi thấy mình gặp khó khăn để làm cho Bản đồ toàn màn hình chiều cao. Bất kỳ trợ giúp nào trong trường hợp này đều được đánh giá cao. Lưu ý rằng im sử dụng phần mở rộng thanh DataZombies cho điều hướng chân trang cố định.

Answer 5

Có cùng vấn đề chính xác khi tải bản đồ với chỉ đường sau khi tải nội dung bằng AJAX và hiển thị và ẩn div bản đồ-canvas.

Bạn phải kích hoạt sự kiện thay đổi kích cỡ, như Brett DeWoody nói, nhưng tôi thấy rằng biến toàn cầu của tôi đã vượt quá phạm vi và tôi phải tham khảo chúng, tức là biến bản đồ google, INSIDE chức năng của tôi một cách rõ ràng trên đối tượng cửa sổ . Dưới đây là những gì tôi có trong directionsService tôi phản ứng: giải pháp

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

    directionsDisplay.setDirections(response); 

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

} 

Answer 6

Brett DeWoody của làm việc, nhưng như tôi thấy bản đồ trong phương thức giải pháp duy nhất đối với tôi là để thêm setTimeout như thế này:

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

Sau khi thêm setTimeout, bản đồ hiển thị và căn giữa một cách hoàn hảo.