Tôi làm cách nào để vẽ lại bằng API Google Maps v3.0?

Question

Tôi có một ứng dụng Bản đồ khá phức tạp xử lý nhiều dấu tùy chỉnh và như vậy. Tôi có một chức năng gọi là resizeWindow mà tôi gọi trong một người nghe rằng bất cứ khi nào màn hình được thay đổi, bản đồ sẽ tự vẽ lại bằng cách tính các giới hạn mới và buộc thay đổi kích thước. Nó trông giống như thế này:

window.onresize = function(event) { fitmap(); }; 

và các chức năng thay đổi kích thước là:

function fitmap(id) { 
    var coords = []; 
    var newlatlng = new google.maps.LatLng(projlat, projlng); 
    coords.push(newlatlng); 

     for (var i=0; i<markers[id].length; i++) { 
      newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude); 
      coords.push(newlatlng); 
     } 
    } 

    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, LtLgLen = coords.length; i < LtLgLen; i++) { 
     bounds.extend (coords[i]); 
    } 
    map.fitBounds(bounds); 

và các công trình này tuyệt vời khi tôi thực sự thay đổi kích thước cửa sổ. Nhưng ...

Tôi có một menu nằm xuống bên phải của cửa sổ. Tôi sử dụng jquery.animate để di chuyển menu đó ra khỏi màn hình. Tôi gọi hàm fitmap là một quá trình bước (hoặc chỉ một lần ở cuối) và nó sẽ không vẽ lại bản đồ.

$('#rightSide').animate({ right:"-240px" }, { 
    duration:1000, 
    step: function(now,fx) { 
     fitmap(); 
    } 
}); 

Tôi đã đọc và đọc về điều này và dường như có một sự kỳ quặc của API Google Maps v3.0 mà việc vẽ lại sẽ không xảy ra nếu không có gì thực sự thay đổi. Trong trường hợp này, cửa sổ khả dụng của tôi thay đổi từ độ rộng màn hình - menu thành toàn màn hình thực. Nhưng không có vẽ lại xảy ra.

Tôi đã dùng thử google.maps.event.trigger (bản đồ, 'thay đổi kích thước'); và điều đó cũng không hiệu quả.

Có cách nào để buộc Google Maps vẽ lại hoàn toàn không?

Answer 1

google.maps.event.trigger(MapInstance,'resize') đang hoạt động tốt cho tôi, đặt nó ở đầu hàm fitMap.

gì bạn đang thiếu:

hiện (không phải trong các mã được đăng trên đây, trong live-mã của bạn), bạn gọi resizeWindow trên mỗi step.

Khi bạn gọi hàm này trên step, hàm sẽ được gọi là trước hoạt ảnh cho bước hiện tại đã hoàn tất. Kết quả là resizeWindow sẽ không được gọi khi hoàn thành hoạt ảnh đã hoàn thành, sẽ có, ví dụ: một lề ở phía bên phải của bản đồ.

Giải pháp: gọi resizeWindow cũng trên complete -backback của animation.