웹 서핑 Google지도는 앱 서랍을 숨긴 후 오른쪽에 회색 영역을 표시합니다.

Question

<google-map>은 <app-drawer-layout>이며 내 서랍이 숨겨져있을 때 오른쪽에 회색 영역이 표시된다는 점만 제외하면 제대로 작동합니다.

나는이 문제에 대해 발견 한 모든 논의가

솔루션이지도의 resize 이벤트를 트리거하는 것이라고 말하지만, 그것은 나를 위해 작동하지 않습니다. 나는 심지어 단지 안전 측면에 있기 위해 지연을 추가하려고 노력했다. 그러나 아직도 아무것도하지 않는다.

document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){ 
    window.setTimeout(function(){ 
     console.log(map.clientWidth); 
     google.maps.event.trigger(map, 'resize'); 
    }, 100); 
}); 

콘솔 출력은 resize 이벤트를 트리거하기 전에 맵 너비가 실제로 변경되었음을 확인하지만 회색 영역은 계속 유지됩니다. 지도를 이동하고 확대/축소하더라도 회색 영역은 계속 표시됩니다 (팬에 따라 넓어 지거나 좁아 지지만). 유일한 문제는 전체 브라우저 창 크기를 조정하는 것입니다.

이것은 Mac 용 Chrome btw입니다.

Answer 1

지도 API 개체 대신 DOM 요소에서 resize 이벤트를 트리거하려고했음을 나타냅니다. 지도 API 개체는 <google-map> DOM 요소의 .map 속성을 통해 가져올 수 있습니다. 나를

<script> 
    var mapElem = document.querySelector('google-map'); 

    mapElem.addEventListener('api-load', function(e) { 
     var mapObj = mapElem.map; 

     document.querySelector('app-drawer').addEventListener('app-drawer-transitioned', function(){ 
      google.maps.event.trigger(mapObj, 'resize'); 
     }); 
    }); 
</script>