Bản đồ Google chỉ tải lần đầu tiên, lần thứ hai màu xám là

Question

Tôi đã tạo ứng dụng Ionic 2/Angular 2. Tôi đã tích hợp Google Maps và nó hoạt động tốt. Tuy nhiên, lần thứ hai Google Maps xuất hiện hoàn toàn màu xám. Tôi đã tìm kiếm trên Internet và thử các giải pháp khác nhau để giải quyết nó. Tuy nhiên, không có giải pháp nào dưới đây hoạt động: - google.maps.event.trigger (this.map, 'resize'); - google.maps.event.clearInstanceListeners/this.map.detach();/this.marker.setMap (null);

Khi tôi đổi kích thước chế độ xem trong chrome thì các bản đồ xuất hiện bằng màu xám đột nhiên được hiển thị. Vì vậy, làm thế nào tôi có thể kích hoạt thay đổi kích cỡ này bằng tay. Tôi hy vọng bạn có thể giúp đỡ.

Mã của tôi có thể được tìm thấy tại đây https://github.com/marinusgeuze/metjekindnaarbuiten.

Trân trọng, Marinus Geuze

==================================== =======

Sự cố được giải quyết bằng cách thêm dòng mã tiếp theo: setTimeout (() => google.maps.event.trigger (this.map, 'resize'), 600);

Answer 1

Tôi không có chính xác cùng một vấn đề, nhưng điều gì đó tương tự xảy ra khi sử dụng LeafletJS trong ứng dụng Ionic 2 của tôi và cuộc gọi tới chức năng invalidateSize của họ trên một thời gian chờ nhỏ đã khắc phục sự cố cho ứng dụng của tôi. Dưới đây là một ví dụ:

ionViewLoaded() { 
    console.log('ObservationDetails.ionViewLoaded'); 

    // Leaflet setup calls here 
    ... 

    // invalidateSize must be called because the page hasn't been drawn, only loaded, 
    // and the map div will get resized causing the "gray block/unloaded map tile" 
    // problem. Invalidating the map will fix that, but the call needs a slight 
    // delay before firing... 
    setTimeout(() => this.map.invalidateSize(), 600); 
} 

Answer 2

Giải pháp cho bản đồ, sử dụng Dưới đây mã của dòng để giải quyết vấn đề:

// you must use "map" variable name, or you can use your defined variable name 
// Example : var map = (new google.maps.Map(...)); 

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);