css - google图片广告 - 谷歌展示广告尺寸




巨大的谷歌地图控件(可能的错误?) (5)

我首先注意到我的谷歌地图控件在我自己的网络应用程序上不成比例地大 (见下文)。

最初我认为我的一些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的网站,并在某些情况下看到了类似的现象。

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


事实证明这不是一个错误。 在这里查看更多:

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的大型控件。


在强烈反对之后,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