Tôi đang sử dụng Google Maps API v3 for javascript. Trong một số trường hợp, tôi chỉ thấy bản đồ ở góc trên bên trái. Để xem, hãy thử truy cập http://telofast.com/telofun/#stationRanking và sau đó nhấn vào một trong nhiều dòng.Bản đồ đôi khi chỉ xuất hiện ở góc trên bên trái của div
Bản đồ hoạt động khi trình duyệt được thay đổi kích thước vì chiều rộng và chiều cao được đặt chính xác và sự kiện thay đổi kích thước được nâng lên.
Giải pháp nhanh nhất cho vấn đề của bạn là gọi phương thức thay đổi kích thước (bên dưới) sau khi javascript hiển thị nó. Có thể sau showDiv('mapDiv'); trong số showScoresAndCenterOn?
google.maps.event.trigger(map, 'resize');
Tôi đã gặp vấn đề tương tự khiến tôi bận tâm trong vài ngày và hôm nay tôi đã tìm ra giải pháp và hoạt động!
Trong trường hợp của tôi, tôi đã sử dụng các tab để xem các phần khác nhau của trang. Nó không phải là jquery ui, tôi đã làm nó. Trong một tab, tôi đã đặt mã của bản đồ. Khi tôi nhấp vào tab bản đồ, nó cho tôi thấy bản đồ nhưng bị hỏng. Cuối cùng tôi đã tìm ra vấn đề và giải pháp.
Để ẩn các thành phần của tôi, tôi đã sử dụng display:none bất kỳ thuộc tính nào để tiết lộ tôi đã sử dụng thuộc tính display:block. Khi bản đồ google cố gắng lấy thứ nguyên của khối vùng chứa, nó được tìm thấy 0 x 0 vì nó đã bị ẩn. Vì vậy, bản đồ cho thấy là bị hỏng.
Sau đó, tôi đã thay đổi css cho tab bản đồ chỉ thành position:absolute;left:-99999px; thay vì display:none và sử dụng jquery để thêm lớp và xóa khi cần thiết với các thuộc tính ở trên. Sau đó, mã bắt đầu hoạt động! Bản đồ của tôi đã được sửa.
Để khắc phục điều này, bạn cần phải
Thay đổi kích thước bản đồ
google.maps.event.trigger(map, 'resize');
Recenter bản đồ, nơi myCenter là lat, lng điểm của bạn.
map.setCenter(myCenter);
Đó là một chút của một hack nhưng nó hoạt động.
'map.setCenter (myCenter);' hoạt động như thế nào? nó có phải là 'google.maps.setCenter' không? – Whitecat
Xin cảm ơn, tôi đã chuyển sang cùng một vấn đề. Và thực sự khi bạn đặt hiển thị: không có điều này sẽ cung cấp cho các vấn đề khi cố gắng xem bản đồ google. Tôi đã xóa màn hình: không có gì và thay đổi nó về vị trí bên ngoài màn hình, khi nhấp vào nút mà vị trí này thay đổi theo hướng nào đó trên màn hình và bản đồ của tôi được hiển thị chính xác
set containar #Div width to 100% .. làm việc cho tôi.
cho trường hợp của tôi, tôi đã làm nó bằng cách khởi tạo bản đồ vào "show()" 's chức năng hoàn chỉnh: '' '$ (currentTab) .show ({ Độ dài: 0, hoàn chỉnh: function() { if ($ (this) .prop ('id') === 'tab-x') { map.initialize(); } } }); '' ' google.maps.event.trigger (bản đồ, 'thay đổi kích thước') và map.resize() không hoạt động đối với trường hợp này. – goldsky