Question

基本上我希望能够添加一个独立按钮来触发嵌入我网站的Google地图，以进入全屏模式。我还没有找到答案，所以任何帮助都会非常感激。

目前进入全屏模式的唯一方法是单击地图内的全屏按钮（位于右上角）。我想我只需要分配这个按钮所具有的相同命令，虽然我不确定这是否适用于地图之外的元素。

提前致谢！

Answer 1

我不知道你是否解决了这个问题，但我最近遇到了同样的问题，我想分享我的做法。

基本上我所做的就是显示默认的全屏控件然后使用其标题在dom中找到它，然后我手动触发了click事件。

当我确认它有效时，我写了一个css来隐藏按钮。

这有点hacky但是有效！

＆＃13;

function initMap() {
  
  var container = $('#container').get(0);
   
  var map = new google.maps.Map(container, {
    center: {lat: -39.000, lng: -60.000},
    zoom: 3,
    fullscreenControl: true
  });

  $('#fullscreen').click(function() {
  	$('#container div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
  });

}

＆＃13;

#container div.gm-style > button[title="Toggle fullscreen view"] {
  display: none;
}

＆＃13;

请参阅此fiddle

希望得到这个帮助。

Answer 2

您只需从地图的容器中调用requestFullscreen方法即可。像这样：

$('[data-id="map_go_fullscreen"]').click(function(e){
    var map = document.querySelector(".gm-style");
    map.requestFullscreen();
});

文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen

Answer 3

map = new google.maps.Map(document.getElementById('map')       , {
        zoom: 6,
        center: latLng,
        gestureHandling: 'none'
      });
initFullscreenControl(map);
      
function initFullscreenControl (map) {
 var elementToSendFullscreen =    
 map.getDiv().firstChild;
 var fullScreenControl =  
  document.querySelector('.fullscreen-control');
      fullScreenControl.onclick = function() {
        elementToSendFullscreen.requestFullscreen();
      };
};

    <div class="controls fullscreen-control">
        <button title="Toggle Fullscreen"> Show full screen </button>
    </div>

<div id = "map"></div>

如何使用单独的按钮触发Google地图全屏模式？

3 个答案: