如何自定义谷歌地图按钮（缩放，全屏，地形图，卫星图）的位置

默认情况下，谷歌地图会在地图的左上角排放地图类型按钮，比如卫星图，地形图。在右上角排放全屏按钮，在右下角排放缩放按钮。如下图所示：

但是现在项目中要求自定义这些按钮的位置，要求的最终地图样式如下所示。

可以看到开发人员需要做的工作有三项。

1. 禁用默认的所有按钮
2. 自定义map, satellite，fullscreen按钮。
3. 新增traffic按钮

这个需求必须参考google-map文档中取代默认控制一节，里面的配置需要参考文档，文档的url地址如下：
https://developers.google.cn/... 在文档中可以看到这样一段代码。

      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);
      }

在initMap方法中生成一个谷歌地图，在配置的时候将disableDefaultUI设置为true。此时地图上没有任何控制按钮，纯粹就是一张地图。也就是说我们不使用默认的样式，而是自己去定制地图上这些控制按钮。问题是如何去定制？大体的思路是将控制按钮添加到map上具体某个位置。谷歌地图API确实提供了支持。可以参考相关文档 https://developers.google.cn/...
map.controls[方位常量]的值是一个容器。我们可以往这个容器中添加控制若干按钮。如以下代码：

  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(ControlContainer);

就是往地图的左上角的容器中添加一个元素，这个元素可以是一个控制按钮，或者是由若干控制按钮组合而成的容器。下面代码就是添加的控制按钮。

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

注意一点，这里所有的控制按钮都包裹在一个div中但是这个div是隐藏的： display:none。这个元素会出现在虚拟DOM中，但是不会被浏览器渲染。这是一种我以前没有注意到的往dom中添加元素的方式。以前的方式那么直接将需要添加的元素写成静态代码，那么通过js动态创建。此处的方式介于两者之间。十分具有灵活性，值得借鉴。

当执行initMap方法中的initZoomControl时，首先获取到放大和缩小按钮，然后在按钮上注册事件，最后将按钮组添加到地图上指定位置。其余的按钮也是按照这个逻辑进行，这里以缩放按钮为例代码如下所示。

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'));

至此，已经完成了html骨架和js事件，还缺css样式。在定义控制按钮的样式时尤其需要注意一点，
所有的自定义按钮方式必须是.gm-style元素的子元素。这个.gm-style应该是google-map的缩写。

.gm-style .controls {
        background-color: white;
      }

文字的表现力还是有限的，如果你依然不懂，可以参考我的github。
https://github.com/logic91151...