Pełnoekranowe sterowanie i utrzymywanie Centrum map

Question

Obecnie wygląda na to, że jeśli mam powiedzieć skromnie zwymiarowany port wyświetlania Google Maps (300 na 300 pikseli) z włączoną opcją FullscreenControl, i wyśrodkowuję ten mały widok mapy na konkretny obszar, np. ... Francja Na przykład ... I wtedy kliknęłam przycisk pełnoekranowy, aby rozwinąć ekran do krawędzi mojego ekranu (1920 x 1080 pikseli), Francja robi się zakręcona w lewym górnym rogu ekranu.

Zasadniczo lewy górny róg oryginalnego ekranu 300px x 300px przesuwa się w lewy górny róg ekranu, a reszta mapy świata rozciąga się od tego rogu na oryginalnym poziomie powiększenia.

Czy istnieje sposób, aby po prostu ustawić go tak, aby wyświetlić na pełnym ekranie, mając ten sam punkt środkowy co oryginalny ekran, i na odwrót, gdy tryb pełnoekranowy zostanie zamknięty?

Czy przełączanie przycisku pełnoekranowego uruchamia zdarzenie lub cokolwiek, do czego można podpiąć centrum setCenter?

Answer 1

Spróbuj

/** 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

komponuję kod nieco dziwne, ale działa perfekcyjnie:

<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> 

używam bounds_changed wydarzenie.

Jeśli wykryję, że mapa jest na pełnym ekranie, ustawiam mapę w centrum, którą odnotowałem w poprzednim zdarzeniu i ustawię wartość logiczną na true. Jeśli mapa nie jest na pełnym ekranie, sprawdzam, czy wartość logiczna jest prawdziwa, oznacza to, że w poprzednim zdarzeniu mapa była w trybie pełnoekranowym, więc wyszukuję mapę, a następnie sprawdzam, czy wartość logiczna jest fałszywa. Pod koniec imprezy utrzymuję centrum w zmiennej dla następnego wydarzenia.

Wszystko to nie są bardzo jasne ...

może skonsultować this znalezione przepełnienie stosu.

Wskazówka:Ten kod nie działa, jeśli wyświetla pojedynczą mapę całej stronie aplikacji internetowej. Nie znajduję sposobu na usunięcie tego błędu. Twoje sugestie są bardzo cenne, dzięki.

Także zauważ:Mój kod jest inspirowany precedensową odpowiedzią. Jednak można znaleźć ten sam kod here. Zauważ, że nie jest to duplikat odpowiedzi. Dodaję do niego swoją własną część kodu.

Proszę mi powiedzieć, jeśli masz jakieś pytania lub uwagi.