FullscreenControl 및지도 센터 유지

Question

현재 FullscreenControl을 사용하는 적당한 크기의 Google지도 표시 포트 (300x300px)를 사용하고 특정 지역에 작은지도보기를 배치하는 것처럼 보입니다. 프랑스 예를 들어 ... 그리고 나서 전체 화면 버튼을 눌러 화면의 가장자리 (1920x1080 픽셀)로 디스플레이를 확장하고 프랑스는 내 화면의 왼쪽 상단 모서리에 자리를 잡습니다.

기본적으로 원래 300px x 300px 디스플레이의 왼쪽 상단이 내 ​​화면의 왼쪽 상단으로 이동하고 나머지 세계지도는 원래 확대/축소 수준의 해당 구석에서 확장됩니다.

전체 화면 모드가 닫히면 원래 화면과 동일한 중심점을 갖는 전체 화면 표시가 열리도록 기본적으로 설정하는 방법이 있습니까?

전체 화면 버튼을 토글하여 이벤트 또는 setCenter를 연결할 수있는 이벤트를 트리거합니까?

Answer 1

이

/** To detect Map Full Screen event */ 
google.maps.event.addListener(map, 'bounds_changed', onBoundsChanged); //Event listener map bound change. 
var isMapFullScreen = false; 
var defaultLocation = { 
    lat: 27.94, 
    lng: -82.45 
}; 
function onBoundsChanged() { 
    if(!isMapFullScreen){ 
     var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight; 
     var isFullWidth= $(map.getDiv()).children().eq(0).width() == window.innerWidth; 
     if (isFullHeight && isFullWidth) { 
      isMapFullScreen = true; 
      myMarker.setPosition(defaultLocation); 
      map.setCenter(defaultLocation); 
      console.log('FULL'); 
     } else { 
      isMapFullScreen = false; 
      console.log('NOT-FULL'); 
     } 
    } 
} 

Answer 2

내가 조금 이상한 코드를 구성하려고하지만, 완벽하게 작동합니다 :

<script> 
    var map; 
    var center = -1; 
    var isFullScreen = false; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 8, 
      center: { lat: -34.397, lng: 150.644 } 
     }); 
     center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() }; 
     google.maps.event.addDomListener(map, 'bounds_changed', onBoundsChanged); 
    } 
    function onBoundsChanged() { 
      var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight; 
      var isFullWidth = $(map.getDiv()).children().eq(0).width() == window.innerWidth; 
      if (isFullHeight && isFullWidth && !isFullScreen) { 
       isFullScreen = true; 
       map.setCenter(center); 
       console.log('FULL'); 
      } else if (!isFullWidth||!isFullHeight){ 
       if (isFullScreen) { 
        map.setCenter(center); 
       } 
       isFullScreen = false; 
       console.log('NOT-FULL'); 
      } 
      center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };    
    } 
</script> 

내가 한 bounds_changed 이벤트를 사용합니다.

지도가 전체 화면으로 표시되는 경우 전례 이벤트에서 기록한 가운데에지도를 설정하고 부울을 true로 설정합니다. 지도가 전체 화면으로 표시되지 않으면 부울이 참인지 확인합니다. 즉, 선행 이벤트에서지도가 전체 화면으로 표시되었으므로지도를 다시 입력하고 그 다음 부울이 false인지 확인합니다. 이벤트가 끝나면 다음 이벤트에서 센터를 가변적으로 유지합니다.

이 모든

은

당신은 스택 오버플로에서 this 게시물을 협의 할 수있다 ... 매우 명확하지 않다.

알림 :웹 응용 프로그램의 모든 페이지에 하나의지도를 표시하면이 코드가 작동하지 않습니다. 이 버그를 제거하는 방법을 찾지 못했습니다. 귀하의 제안은 매우 감사드립니다.

참고 사항 :내 코드는 선례의 답을 얻은 것입니다. 그러나 동일한 코드 here을 찾을 수 있습니다. 중복 답변이 아닙니다. 내 부분에 코드를 추가합니다.

몇 가지 질문이나 의견이 있으면 알려주십시오.