仅全屏显示 mapType 控件

Question

我在 google map api 上使用以下选项。

const map_options = {
  zoom: 15,
  center: center,
  streetViewControl: false,
  disableDefaultUI: false,
  draggable: false,
  zoomControl: true,
  mapTypeControl: false,
  fullscreenControl: true,
};

this.map = new google.maps.Map(this.mapElement.nativeElement, map_options);

我想做的是让 mapTypeControls 只在全屏上可用，而不是在小地图上。当我设置 mapTypeControl = false 时，它​​会同时关闭它。

有没有只为小地图关闭的选项？

谢谢

编辑：

以为我会为打字稿添加一个简单的答案：

this.map.addListener('bounds_changed', function () {
  if(document['fullscreenElement']){
    this.map.setOptions({mapTypeControl: true});
  }
  else{
    this.map.setOptions({mapTypeControl: false});
  }

}.bind(this));

Answer 1

你需要检测到全屏的变化，添加mapTypeControl，检测全屏退出，移除mapTypeControl：

// detect fullscreen change  
if (isFullscreen(map.getDiv().firstChild)) {
  map.setOptions({mapTypeControl: true}); // add the mapTypeControl
} else {
  map.setOptions({mapTypeControl: false}); // remove the mapTypeControl
}

相关示例：

• Replacing Default Controls

相关问题：

• Google Maps API v3 - how to detect when map changes to full screen mode?

// modified from the example in Google's documentation:
// https://developers.google.com/maps/documentation/javascript/examples/control-replacement
document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() {
// detect fullscreen change  
    if (isFullscreen(map.getDiv().firstChild)) {
      console.log("full screen");
      map.setOptions({mapTypeControl: true}); // add the mapTypeControl
    } else {
      console.log("not full screen");
      map.setOptions({mapTypeControl: false}); // remove the mapTypeControl
    }
  };
function isFullscreen(element) {
  return (
    (document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement) == element
  );
}

proof of concept fiddle

代码 sn-p：

"use strict";

let map;

function initMap() {
const map_options = {
  zoom: 15,
  center: {
      lat: -34.397,
      lng: 150.644
    },
  streetViewControl: false,
  disableDefaultUI: false,
  draggable: false,
  zoomControl: true,
  mapTypeControl: false,
  fullscreenControl: true,
};
  map = new google.maps.Map(document.querySelector("#map"), map_options);
  document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() {
  
    if (isFullscreen(map.getDiv().firstChild)) {
      console.log("full screen");
      map.setOptions({mapTypeControl: true});
    } else {
      console.log("not full screen");
      map.setOptions({mapTypeControl: false});
    }
  };

}


function isFullscreen(element) {
  return (
    (document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement) == element
  );
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.gm-style .controls {
  font-size: 28px;
  /* this adjusts the size of all the controls */
  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  box-sizing: border-box;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  height: 1em;
  margin: 6px;
  text-align: center;
  user-select: none;
  padding: 2px;
  width: 1em;
}

.gm-style .controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
}

.gm-style .controls button:hover {
  color: rgba(0, 0, 0, 0.9);
}

.gm-style .controls.zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
}

.gm-style .controls.zoom-control button {
  font: 0.85em Arial;
  margin: 1px;
  padding: 0;
}

.gm-style .controls.maptype-control {
  display: flex;
  flex-direction: row;
  width: auto;
}

.gm-style .controls.maptype-control button {
  display: inline-block;
  font-size: 0.5em;
  margin: 0 1px;
  padding: 0 6px;
}

.gm-style
  .controls.maptype-control.maptype-control-is-map
  .maptype-control-map {
  font-weight: 700;
}

.gm-style
  .controls.maptype-control.maptype-control-is-satellite
  .maptype-control-satellite {
  font-weight: 700;
}

.gm-style .controls.fullscreen-control button {
  display: block;
  font-size: 1em;
  height: 100%;
  width: 100%;
}

.gm-style .controls.fullscreen-control .fullscreen-control-icon {
  border-style: solid;
  height: 0.25em;
  position: absolute;
  width: 0.25em;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 2px 0 0 2px;
  left: 0.1em;
  top: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 0 2px 2px 0;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 2px 2px 0 0;
  right: 0.1em;
  top: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 0 0 2px 2px;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 0 0 2px 2px;
  left: 0.1em;
  bottom: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 2px 2px 0 0;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 0 2px 2px 0;
  right: 0.1em;
  bottom: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 2px 0 0 2px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Replacing Default Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <!-- Hide controls until they are moved into the map. -->
    <div style="display:none">
      <div class="controls zoom-control">
        <button class="zoom-control-in" title="Zoom In">+</button>
        <button class="zoom-control-out" title="Zoom Out">−</button>
      </div>
      <div class="controls maptype-control maptype-control-is-map">
        <button class="maptype-control-map" title="Show road map">Map</button>
        <button
          class="maptype-control-satellite"
          title="Show satellite imagery"
        >
          Satellite
        </button>
      </div>
      <div class="controls fullscreen-control">
        <button title="Toggle Fullscreen">
          <div
            class="fullscreen-control-icon fullscreen-control-top-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-top-right"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-right"
          ></div>
        </button>
      </div>
    </div>
  </body>
</html>