google-maps - 如何使用单独的按钮触发Google Maps全屏模式？

Question

基本上，我希望能够添加一个独立按钮来触发我嵌入到网站中的Google Map进入全屏模式。到目前为止，我还没有运气找到答案，因此，我们将不胜感激。

当前，进入全屏模式的唯一方法是单击 map 内的全屏按钮(位于右上角)。我想我只需要分配该按钮具有的相同命令，尽管我不确定这是否适用于 map 之外的元素。

提前致谢!

Answer 1

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

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

当我验证该方法可行时，我编写了一个CSS来隐藏该按钮。

这有点hacky，但是可以用!

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

}

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

看到这个 fiddle

希望对您有所帮助。