全屏幕控制和維護地圖中心

目前，如果我已經說FullscreenControl啓用適度大小的Google地圖顯示端口（300像素，300像素），並且我將該小地圖視圖居中在特定區域，例如...法國，例如......然後我點擊全屏按鈕將顯示器擴展到我的屏幕邊緣（1920px x 1080px），法國在屏幕的左上角收起了wayyyyy。全屏幕控制和維護地圖中心

基本上，原始300px x 300px顯示屏的左上角移動到屏幕的左上角，而世界地圖的其餘部分則從原始縮放級別的該角延伸。

有什麼辦法可以基本上設置它，以便全屏顯示打開時與原始顯示有相同的中心點，反之亦然，當全屏模式關閉時？

切換全屏按鈕會觸發一個事件或任何可以掛接setCenter的事件？

來源

2016-10-26 Crapachi

請參閱http://stackoverflow.com/questions/39620850/google-maps-api-v3-how-to-detect-when-map-changes-to-full-screen-mode/ –

Crapachi，你能找到答案？ @ anatoly.sukhanov這個相關的問題並沒有提到如何在改變/從fullScreen之前改變.getCenter（）以及如何改變/從fullScreen改變.setCenter（） – Emilio

@Emilio google.maps.Map.getCenter ，然後google.maps.Map.setCenter或panTo –

試試這個

/** 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'); 
     } 
    } 
}

來源

2017-09-07 05:33:02

我認爲你不瞭解完整的問題。首先，你必須得到基本地圖的中心（它可以根據地圖的位置而變化），然後在整個屏幕上重新定位。其次，如果您在所有網絡應用程序（如google.maps.com）中顯示地圖，則腳本會檢測到地圖處於完整模式，但事實並非如此。 –

我撰寫代碼有點怪，但它完美：

<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。如果地圖不是全屏，我檢查布爾是否爲真，這意味着在先前的事件中地圖全屏顯示，因此我重新映射地圖，然後檢查布爾值是否爲假。活動結束時，我將中心保持在下一個活動的變化中。

這一切都不是很清楚......

您可以諮詢this後的堆棧溢出。

說明：如果您在Web應用的所有頁面中顯示單個地圖，則此代碼不起作用。我找不到解決此問題的方法。您的建議非常感謝，謝謝。

另請注意：我的代碼受到了先例答案的啓發。但是，您可以找到相同的代碼here。請注意，這不是重複的答案。我在其中添加了我自己的部分代碼。

如果您有任何問題或意見，請告訴我。

來源

2017-09-09 19:24:38

全屏幕控制和維護地圖中心

回答

相關問題