Google지도는 처음에만로드됩니다. 두 번째는 회색입니다.

Ionic 2/Angular 2 App을 만들었습니다. Google지도를 통합했는데 정상적으로 작동합니다. 그러나 두 번째로 Google지도는 완전히 회색으로 보입니다. 나는 인터넷을 수색하고 그것을 해결하는 다른 해결책을 시도했다. 그러나 아래의 해결 방법 중 어느 것도 작동하지 않습니다. - google.maps.event.trigger (this.map, 'resize'); - google.maps.event.clearInstanceListeners/this.map.detach();/this.marker.setMap (null);Google지도는 처음에만로드됩니다. 두 번째는 회색입니다.

크롬에서보기의 크기를 조정하면 회색으로 표시된지도가 갑자기 표시됩니다. 그렇다면이 크기 조정을 수동으로 어떻게 트리거 할 수 있습니까? 네가 도울 수 있기를 바란다.

내 코드는 여기 https://github.com/marinusgeuze/metjekindnaarbuiten에서 찾을 수 있습니다.

안부, 인 Marinus Geuze

을 ==================================== =======

다음 코드 줄을 추가하면 문제가 해결됩니다. setTimeout (() => google.maps.event.trigger (this.map, 'resize'), 600);

출처

2016-09-19 Marinus Geuze

당신이 무슨 소리를 .. 당신은 탭 내부의지도를 .. 그리고 탭을 리콜했을 때지도를 바꾸지 마십시오. 다른 행동이 있습니다 .. 설명하고 결국지도를 표시하십시오 – scaisEdge

관련 코드를 포함 시켜서 플 런커를 추가하십시오. –

정확히 같은 문제가 없었지만 이오닉 2 앱에서 LeafletJS를 사용할 때와 비슷한 점이 생겼습니다. 작은 시간 초과시 invalidateSize 함수를 호출하면 내 앱의 문제가 해결되었습니다. 지도에 대한

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); 
}

출처

2016-09-19 22:50:02 sherb

친애하는 Sherb, 문제 해결에 도움을 주셨습니다. 이 코드 줄을 추가하면 문제가 해결되었습니다. setTimeout (() => google.maps.event.trigger (this.map, 'resize'), 600); –

슈레브와 마리너스에게 감사드립니다. 나는 같은 문제가 있었고 타임 아웃 해법으로 해결했다. 나는 해결책을 찾으려고 너무 많은 시간을 낭비했다. 공유해 주셔서 감사합니다. –

해결, 문제 해결을 위해 라인의 코드를 아래의 사용 예를 들면 다음과 같습니다이다 "처음로드"

// 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);

출처

2017-03-24 07:07:53

Google지도는 처음에만로드됩니다. 두 번째는 회색입니다.

답변

관련 문제