css - google地圖錯誤




巨大的谷歌地圖控件(可能的錯誤?) (5)

事實證明這不是一個錯誤。 在這裡查看更多:

2018年8月13日03:56 PM報告問題Google Maps JavaScript API每週頻道(3.34)將使用更大的控制UI。

隨著我們看到各種設備上觸摸操作的增加,我們調整了控制UI以適應手指觸摸和鼠標點擊。

通過使用v = quarterly,v = 3,v = 3.33或v = 3.32加載API,可以選擇不使用此功能。 注意:對退役版本的請求將收到默認頻道,請參閱1

如果您對新控制UI有任何要求或其他問題,請告訴我們。

1 https://issuetracker.google.com/112519576

在加載API以使用較小的控件時請使用v = quarterly,v = 3,v = 3.33或v = 3.32

編輯:

請參閱@Jonny van Beek關於如何將Google地圖的控件縮放到您選擇的大小的答案。

請參閱@garethdn和@Peter(下面)中的答案,了解如何使用您自己的自定義控件替換Google的大型控件。

我首先註意到我的谷歌地圖控件在我自己的網絡應用程序上不成比例地大 (見下文)。

最初我認為我的一些CSS在控件上使用Google的CSS; 然而,訪問谷歌自己的網頁告訴我這件事並不是孤立的......

以下是其文檔的地圖: https://developers.google.com/maps/documentation/javascript/examples/control-positioninghttps://developers.google.com/maps/documentation/javascript/examples/control-positioning

大型控件也出現在他們文檔的每一頁上。 我嘗試了不同的機器和不同的瀏覽器(Chrome和Firefox)。

我還嘗試了其他使用Google Maps API的網站,並在某些情況下看到了類似的現象。

還有其他人遇到過同樣的問題嗎?


在強烈反對之後,Google現在發布了一個如何替換默認(大)控件的示例: https://developers.google.com/maps/documentation/javascript/examples/control-replacementhttps://developers.google.com/maps/documentation/javascript/examples/control-replacement

以下是Google發布的代碼:

<!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>

我添加了一些CSS,就是這樣。

/* Fix +/- zoom buttons design */
#map .gm-bundled-control-on-bottom {
  right: 30px !important;
  bottom: 116px !important;
}
#map .gm-bundled-control-on-bottom > div:first-child {
   top: 44px !important;
}
#map .gmnoprint > .gmnoprint > div {
  height: 60px !important;
  width: 30px !important;
}
#map .gmnoprint > .gmnoprint > div > div { /* seperator */
  width: 22.5px !important;
  margin: 0px 3.75px !important;
}
#map .gmnoprint > .gmnoprint button {
  width: 30px !important;
  height: 30px !important;
}
#map .gmnoprint > .gmnoprint button img {
  height: 13.5px !important;
  width: 13.5px !important;
  margin: 6.75px 8.25px 9.75px !important;
}

這是為黃人按鈕:

/* yellow person button design*/
#map .gm-svpc {
	width: 30px !important;
	height: 30px !important;
}
#map .gm-svpc img:nth-child(1), #map .gm-svpc img:nth-child(2){
	width: 13.5px !important;
	height: 22.5px !important;
	left: -7px !important;
	top: -12px !important;
}
#map .gm-svpc img:nth-child(3) {
	width: 24px !important;
	height: 30px !important;
}

並為最後MAP |衛星按鈕設計

/* MAP|Satellite buttons design*/
#map .gm-style-mtc > div:nth-child(1) {
  padding: 0px 9px !important;
  height: 30px !important;		
  font-size: 15px !important;
}
#map .gm-style-mtc > div:nth-child(2) {
  top: 30px !important;
}
#map .gm-style-mtc > div:nth-child(2) > div {
  padding: 2px 4px 2px 2px !important;
  font-size: 14px !important;
}


看起來谷歌現在已經承認這一點,並提供了一個(目前未記錄的)功能,通過在創建地圖時傳入“controlSize”來更改UI縮放。

here查看Google的評論。

JSFiddle here (來自上面的評論)。

示例代碼:

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

注意:40是當前的默認值(對應於此問題所涉及的大型控件)。 我發現25與之前的控件大致相同。


除了@שלומיאהרוני的答案,添加此項以修復全屏按鈕。 和以前一樣,這不是一個長期的好解決方案,但它是一個很好的星期五晚上修復。

/* full screen button design */
#map .gm-fullscreen-control {
    width: 30px !important;
    height: 30px !important;
}
#map .gm-fullscreen-control img:nth-child(1), #map .gm-fullscreen-control img:nth-child(2), #map .gm-fullscreen-control img:nth-child(3) {
    margin: 6px !important;
}






google-maps-api-3