Bản đồ Google + jQuery: hiển thị lỗi

Question

Khi đặt bản đồ google bên trong tab jquery-ui, bản đồ không hiển thị đúng trong một số trường hợp nhất định. Để tái sản xuất:

1. Go here
2. Nhấp vào liên kết 'danh sách'
3. Thay đổi kích thước cửa sổ trình duyệt
4. Nhấp vào 'bản đồ' liên kết

Quan sát rằng một số các lớp phủ địa danh vẽ đúng cách, nhưng những người khác thì không. Tôi đã thực sự loại bỏ tất cả những thứ jquery-ui để giới hạn phạm vi của vấn đề, và nó dường như chỉ là ứng dụng hiển thị: hide/display: block gây ra vấn đề.

CẬP NHẬT

Lỗi cũng xảy ra, thỉnh thoảng, chỉ khi chuyển đổi giữa display: none/block - ví dụ không thay đổi kích thước. Điều này có vẻ là phổ biến nhất trong IE (8).

Answer 1

thử điều này:

if (window.attachEvent) { 
    window.attachEvent("onresize", function() {this.map.onResize()}); 
    } else { 
    window.addEventListener("resize", function() {this.map.onResize()} , false); 
    } 

sau

map_initialize(); 

bởi vì bạn phải nói với bản đồ mà trang được thay đổi kích cỡ, có lẽ đó là vấn đề bạn đang gặp không phải là một jquery một

EDIT

Ok tháo

if (window.attachEvent) { 
      window.attachEvent("onresize", function() {map.onResize()}); 
     } else { 
      window.addEventListener("resize", function() {map.onResize()} , false); 
     } 

và thay thế của bạn

$('#map').show(); 

với:

$("#map").show(1, function() { 
      resizeMap(); 
     }); 

resizeMap() sẽ gọi Google Maps' checkResize() trên bản đồ cụ thể.

nguồn: http://jqueryui.com/demos/tabs/#...my_slider.2C_Google_Map.2C_sIFR_etc._not_work_when_placed_in_a_hidden_.28inactive.29_tab.3F

Answer 2

thử gọi map.onResize() sau khi bạn hiển thị bản đồ mỗi lần.

Nó có thể không hoạt động tốt nếu nó được gọi là khi bản đồ được ẩn bằng cách sử dụng màn hình: none vì nó sẽ có chiều cao và chiều rộng bằng không.

Answer 3

Từ online docs:

Sử dụng các kỹ thuật off-trái cho ẩn tấm tab không hoạt động. Ví dụ. trong tờ kiểu dáng của bạn thay thế quy tắc cho bộ chọn lớp .2ui".ui-tab.. Ui-tab-hide" với

.ui-tabs .ui-tabs-hide { 
    position: absolute; 
    left: -10000px; 
} 

Answer 4

Sử dụng jQuery Google Maps plugin là đã có vấn đề tương tự với jQuery UI tab

Bản đồ được tạo ra như thế này:

$("#google-map").googlemap({ 
    controls: false, 
    labels: true, 
    zoom: 9, 
    latitude: 51.5, 
    longitude: 0, 
    debug: false 
}); 

Nó được giải quyết rất dễ dàng (nhưng không nhanh chóng) bằng cách gọi

$("#google-map").googlemap().getMap().checkResize(); 

Sau khi bản đồ div được hiển thị. Tôi đã thử nghiệm điều này trên FF và Safari, ngoài ra

resizeTo(screen.width, screen.height); 

Hoạt động trong FF chứ không phải IE hoặc Safari.