StreetView API: 隐藏全屏控件

Question

我试图在街景 API HUD 中隐藏切换全屏元素。

panorama = new google.maps.StreetViewPanorama(document.getElementById(data.id), {

        position            : new google.maps.LatLng(data.lat, data.lng),
        pov: {
            heading         : Number(data.heading),
            pitch           : Number(data.pitch)
        },
        linksControl: false,
        panControl: false,
        addressControl: false,
        enableCloseButton: false,
        zoomControl: false,
        fullScreenControl: false,
        enableCloseButton: false,
        addressControlOptions: {
             position: google.maps.ControlPosition.BOTTOM_CENTER
        }
    });

这些选项是指定的 here。除了 fullScreenControl

所有选项都有效

我的代码可以实时查看here。 UI 元素位于视口的右上角。

文档警告如下：

Note: This page describes the controls available in version 3.22 and later of the Google Maps JavaScript API. If you want to continue using the earlier set of controls for a while, you can set google.maps.controlStyle = 'azteca' in v3.22. Read more about the changes to the controls in this article: What's New in the v3.22 Map Controls.

但是我链接到 API Js 文件如下：

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

而 3.exp 在撰写本文时应为 3.22。

我在这里错过了什么？

Answer 1

我认为目前 API 中存在一个小缺陷。我做了一些测试，也无法删除带有 fullScreenControlOptions 字段的全屏控件，如文档中所述。

即使将 disableDefaultUI 设置为 true，也会显示全屏控件。

我知道这可能不是摆脱元素的更好方法，但您可以这样做：

var FULL_SCREEN_CONTROL_STYLE = {
 width: '25px',
 height: '25px',
 top: '0px',
 right: '0px',
 position: 'absolute',
 overflow: 'hidden'
};

var children = panorama.getContainer().getElementsByTagName('div');

for (var i = 0; i<children.length; i++) {

 var current = children[i];
  
 var match = true;
 
 for (var k in FULL_SCREEN_CONTROL_STYLE) {
  if (current.style[k] != FULL_SCREEN_CONTROL_STYLE[k]) {
   match = false;
  }
 }
 
 if (match) { // THIS IS OUR ELEMENT
  current.parentElement.removeChild(current);
 }
 
}

Answer 2

另一个解决方案是使用css隐藏全屏元素：

.gm-style > div:nth-child(10){
 display:none;
}

Answer 3

随着 2016 年 1 月 18 日发布的最新版 Googlemap v3.22、v3.23，将执行以下操作：

.gm-fullscreen-control {
  display: none;
}

Answer 4

fullscreenControl: false 而不是 fullScreenControl: false

Answer 5

Michal Szyndel 说得对。屏幕中的 s 是小写的。我建议将他的答案更改为正确答案。我今天测试了 fullscreenControl 工作但 fullScreenControl 没有。

Answer 6

以下说法不正确。不报错但是对控件没有影响

fullScreenControl: false,   -- this is not right

正确的代码是

fullscreenControl: false,

参见：https://developers.google.com/maps/documentation/javascript/reference

StreetView API: 隐藏全屏控件

StreetView API: Hiding FullScreen Control

javascript

google-maps

google-maps-api-3

google-street-view