摘要：默認情況下，谷歌地圖會在地圖的左上角排放地圖類型按鈕，比如衛星圖，地形圖。在方法中生成一個谷歌地圖，在配置的時候將設置為。此時地圖上沒有任何控制按鈕，純粹就是一張地圖。谷歌地圖確實提供了支持。

默認情況下，谷歌地圖會在地圖的左上角排放地圖類型按鈕，比如衛星圖，地形圖。在右上角排放全屏按鈕，在右下角排放縮放按鈕。如下圖所示：

但是現在項目中要求自定義這些按鈕的位置，要求的最終地圖樣式如下所示。

可以看到開發人員需要做的工作有三項。

禁用默認的所有按鈕

自定義map, satellite，fullscreen按鈕。

新增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);

就是往地圖的左上角的容器中添加一個元素，這個元素可以是一個控制按鈕，或者是由若干控制按鈕組合而成的容器。下面代碼就是添加的控制按鈕。

    

    
    

      

        +
        ?
      
      

        Map
        Satellite
      
      

        
          

          

          

          

        
      
    

注意一點，這里所有的控制按鈕都包裹在一個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...