Css 巨大的谷歌地图控件（可能有Bug？）_Css_Google Maps_Google Maps Api 3

Css 巨大的谷歌地图控件（可能有Bug？）

css google-maps google-maps-api-3

Css 巨大的谷歌地图控件（可能有Bug？）,css,google-maps,google-maps-api-3,Css,Google Maps,Google Maps Api 3,我首先注意到，在我自己的web应用程序上，我的谷歌地图控件的大小不成比例（见下图）起初我以为我的一些CSS是在控件上玩谷歌的CSS；然而，访问谷歌自己的网页告诉我，这起事件对我来说并不是孤立的以下是他们文档的地图：大控件也出现在我的文档的每一页上。我尝试了不同的机器和浏览器（Chrome和Firefox）我还尝试了其他使用谷歌地图API的网站，在某些情况下看到了类似的现象还有其他人遇到同样的问题吗？结果表明这不是一个bug 2018年8月13日03:56报道谷歌地图JavaScr

我首先注意到，在我自己的web应用程序上，我的谷歌地图控件的大小不成比例（见下图）

起初我以为我的一些CSS是在控件上玩谷歌的CSS；然而，访问谷歌自己的网页告诉我，这起事件对我来说并不是孤立的

以下是他们文档的地图：

大控件也出现在我的文档的每一页上。我尝试了不同的机器和浏览器（Chrome和Firefox）

我还尝试了其他使用谷歌地图API的网站，在某些情况下看到了类似的现象

还有其他人遇到同样的问题吗？

结果表明这不是一个bug

2018年8月13日03:56报道谷歌地图JavaScript API每周发布通道（3.34）将使用更大的控制UI

随着各种设备上触摸操作的增加，我们调整控件UI以适应手指触摸和鼠标点击

可以通过加载带有v=quarterly的API来选择不使用此选项， v=3，v=3.33或v=3.32。注意：对失效版本的请求将收到默认频道，请参见

如果您有任何关于新控件UI的请求或其他问题请让我们知道

加载API时使用v=季度、v=3、v=3.33或v=3.32以使用较小的控件

编辑：

请参考@Jonny van Beek关于如何将谷歌地图控件缩放到您选择的大小的回答

参考@garethdn和@Peter（以下）的答案，了解如何用您自己的自定义控件替换Google的大型控件

有关此问题的最新正确解决方案，请参阅@Dutchmanjonny的帖子（如下）。

对于那些不愿意通过指定较旧版本的API来选择退出的人，创建自定义控件相对简单。下面将创建两个

按钮元素以进行放大和缩小
defaultMapOptions: google.maps.MapOptions = {
    // Hide Google's default zoom controls
    zoomControl: false
};

initializeMap(el: HTMLElement, options?: google.maps.MapOptions): google.maps.Map {
    let opts = Object.assign({}, this.defaultMapOptions, options);
    let map = new google.maps.Map(el, opts);
    let zoomControlsDiv = document.createElement('div');
    // Add a class to the container to allow you to refine the position of the zoom controls
    zoomControlsDiv.classList.add('google-map-custom-zoom-controls');

    this.createCustomZoomControls(zoomControlsDiv, map);

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlsDiv);

    return map;
}

createCustomZoomControls(controlDiv: HTMLDivElement, map: google.maps.Map) {
    let zoomInControlUI: HTMLButtonElement = document.createElement('button');
    let zoomOutControlUI: HTMLButtonElement = document.createElement('button');
    let zoomControls: HTMLButtonElement[] = [zoomInControlUI, zoomOutControlUI];
    // List of classes to be applied to each zoom control
    let buttonClasses: string[] = ['btn', 'btn-primary', 'btn-sm'];

    zoomInControlUI.innerHTML = `&plus;`;
    zoomOutControlUI.innerHTML = `&minus;`;

    zoomControls.forEach(zc => {
        zc.classList.add(...buttonClasses);
        controlDiv.appendChild(zc);
    });

    google.maps.event.addDomListener(zoomInControlUI, 'click', () => map.setZoom(map.getZoom() + 1));
    google.maps.event.addDomListener(zoomOutControlUI, 'click', () => map.setZoom(map.getZoom() - 1));
}

let map = this.initializeMap(myGoogleMapContainerElement);

在抵制之后，谷歌现在发布了一个如何替换默认（大）控件的示例：
以下是谷歌发布的代码：
<!DOCTYPE html>
<html>
  <head>
    <title>Replacing Default Controls</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* 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;
      }

    </style>
  </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>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.querySelector('#map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8,
          disableDefaultUI: true,
        });

        initZoomControl(map);
        initMapTypeControl(map);
        initFullscreenControl(map);
      }

      function initZoomControl(map) {
        document.querySelector('.zoom-control-in').onclick = function() {
          map.setZoom(map.getZoom() + 1);
        };
        document.querySelector('.zoom-control-out').onclick = function() {
          map.setZoom(map.getZoom() - 1);
        };
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
            document.querySelector('.zoom-control'));
      }

      function initMapTypeControl(map) {
        var mapTypeControlDiv = document.querySelector('.maptype-control');
        document.querySelector('.maptype-control-map').onclick = function() {
          mapTypeControlDiv.classList.add('maptype-control-is-map');
          mapTypeControlDiv.classList.remove('maptype-control-is-satellite');
          map.setMapTypeId('roadmap');
        };
        document.querySelector('.maptype-control-satellite').onclick =
            function() {
          mapTypeControlDiv.classList.remove('maptype-control-is-map');
          mapTypeControlDiv.classList.add('maptype-control-is-satellite');
          map.setMapTypeId('hybrid');
        };

        map.controls[google.maps.ControlPosition.LEFT_TOP].push(
            mapTypeControlDiv);
      }

      function initFullscreenControl(map) {
        var elementToSendFullscreen = map.getDiv().firstChild;
        var fullscreenControl = document.querySelector('.fullscreen-control');
        map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
            fullscreenControl);


        fullscreenControl.onclick = function() {
          if (isFullscreen(elementToSendFullscreen)) {
            exitFullscreen();
          } else {
            requestFullscreen(elementToSendFullscreen);
          }
        };

        document.onwebkitfullscreenchange =
        document.onmsfullscreenchange =
        document.onmozfullscreenchange =
        document.onfullscreenchange = function() {
          if (isFullscreen(elementToSendFullscreen)) {
            fullscreenControl.classList.add('is-fullscreen');
          } else {
            fullscreenControl.classList.remove('is-fullscreen');
          }
        };
      }

      function isFullscreen(element) {
        return (document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.mozFullScreenElement ||
                document.msFullscreenElement) == element;
      }
      function requestFullscreen(element) {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullScreen) {
          element.msRequestFullScreen();
        }
      }
      function exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msCancelFullScreen) {
          document.msCancelFullScreen();
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?    key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>


替换默认控件
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
.gm风格。控制{
字体大小：28px；/*这将调整所有控件的大小*/
背景色：白色；
盒影：rgba（0,0,0,0.3）0px 1px 4px-1px；
框大小：边框框；
边界半径：2px；
光标：指针；
字体大小：300；
高度：1米；
利润率：6px；
文本对齐：居中；
用户选择：无；
填充：2px；
宽度：1米；
}
.gm样式。控制按钮{
边界：0；
背景色：白色；
颜色：rgba（0,0,0,0.6）；
}
.gm样式。控制按钮：悬停{
颜色：rgba（0,0,0,0.9）；
}
.gm样式.控件.缩放控件{
显示器：flex；
弯曲方向：立柱；
高度：自动；
}
.gm样式.controls.zoom-control按钮{
字体：0.85em Arial；
保证金：1px；
填充：0；
}
.gm样式.controls.maptype-control{
显示器：flex；
弯曲方向：行；
宽度：自动；
}
.gm样式.controls.maptype-control按钮{
显示：内联块；
字体大小：0.5em；
利润率：0.1px；
填充：0 6px；
}
.gm style.controls.maptype-control.maptype-control-is-map.maptype-control-map{
字号：700；
}
.gm style.controls.maptype-control.maptype-control-is-satellite.maptype-control-satellite{
字号：700；
}
.gm样式。控制。全屏控制按钮{
显示：块；
字号：1em；
身高：100%；
宽度：100%
}
.gm样式.控件.全屏-控件.全屏控件图标{
边框样式：实心；
高度：0.25em；
位置：绝对位置；
宽度：0.25em；
}
.gm样式。控件。全屏-控件。全屏-控件-图标。全屏-控件左上角{
边框宽度：2px 0 0 2px；
左：0.1米；
顶部：0.1米；
}
.gm样式.controls.fullscreen-control.is-fullscreen.fullscreen-control-icon.fullscreen-control-top-left{
边框宽度：0 2px 2px 0；
}
.gm样式。控件。全屏-控件。全屏-控件-图标。全屏-控件-右上角{
边框宽度：2×2×0；
右：0.1米；
顶部：0.1米；
}
.gm样式.controls.fullscreen-control.is-fullscreen.fullscreen-control-icon.fullscreen-control-top-right{
边框宽度：0 0 2px 2px；
}
.gm样式。控件。全屏-控件。全屏-控件-图标。全屏-控件-左下角{
边框宽度：0 0 2px 2px；
左：0.1米；
底部：0.1米；
}
.gm样式.controls.fullscreen-control.is-fullscreen.fullscreen-control-icon.fullscreen-control-bottom-left{
边框宽度：2×2×0；
}
.gm样式。控件。全屏-控件。全屏-控件-图标。全屏-控件-右下角{
边框宽度：0 2px 2px 0；
右：0.1米；
底部：0.1米；
}
.gm样式.controls.fullscreen-control.is-fullscreen.fullscreen-control-icon.fullscreen-control-bottom-right{
边框宽度：2px 0 0 2px；
}
+
−
地图
卫星
 .gm-bundled-control
,.gm-style-mtc
,.gm-fullscreen-control{
    transform: scale(.7);
}

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    controlSize: 32,
  });
}