摘要：默認(rèn)情況下，谷歌地圖會(huì)在地圖的左上角排放地圖類型按鈕，比如衛(wèi)星圖，地形圖。在方法中生成一個(gè)谷歌地圖，在配置的時(shí)候?qū)⒃O(shè)置為。此時(shí)地圖上沒有任何控制按鈕，純粹就是一張地圖。谷歌地圖確實(shí)提供了支持。

默認(rèn)情況下，谷歌地圖會(huì)在地圖的左上角排放地圖類型按鈕，比如衛(wèi)星圖，地形圖。在右上角排放全屏按鈕，在右下角排放縮放按鈕。如下圖所示：

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

可以看到開發(fā)人員需要做的工作有三項(xiàng)。

禁用默認(rèn)的所有按鈕

自定義map, satellite，fullscreen按鈕。

新增traffic按鈕

這個(gè)需求必須參考google-map文檔中取代默認(rèn)控制一節(jié)，里面的配置需要參考文檔，文檔的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方法中生成一個(gè)谷歌地圖，在配置的時(shí)候?qū)isableDefaultUI設(shè)置為true。此時(shí)地圖上沒有任何控制按鈕，純粹就是一張地圖。也就是說我們不使用默認(rèn)的樣式，而是自己去定制地圖上這些控制按鈕。問題是如何去定制？大體的思路是將控制按鈕添加到map上具體某個(gè)位置。谷歌地圖API確實(shí)提供了支持?？梢詤⒖枷嚓P(guān)文檔 https://developers.google.cn/...
map.controls[方位常量]的值是一個(gè)容器。我們可以往這個(gè)容器中添加控制若干按鈕。如以下代碼：

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

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

    

    
    

      

        +
        ?
      
      

        Map
        Satellite
      
      

        
          

          

          

          

        
      
    

注意一點(diǎn)，這里所有的控制按鈕都包裹在一個(gè)div中但是這個(gè)div是隱藏的： display:none。這個(gè)元素會(huì)出現(xiàn)在虛擬DOM中，但是不會(huì)被瀏覽器渲染。這是一種我以前沒有注意到的往dom中添加元素的方式。以前的方式那么直接將需要添加的元素寫成靜態(tài)代碼，那么通過js動(dòng)態(tài)創(chuàng)建。此處的方式介于兩者之間。十分具有靈活性，值得借鑒。

當(dāng)執(zhí)行initMap方法中的initZoomControl時(shí)，首先獲取到放大和縮小按鈕，然后在按鈕上注冊(cè)事件，最后將按鈕組添加到地圖上指定位置。其余的按鈕也是按照這個(gè)邏輯進(jìn)行，這里以縮放按鈕為例代碼如下所示。

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

至此，已經(jīng)完成了html骨架和js事件，還缺css樣式。在定義控制按鈕的樣式時(shí)尤其需要注意一點(diǎn)，
所有的自定義按鈕方式必須是.gm-style元素的子元素。這個(gè).gm-style應(yīng)該是google-map的縮寫。

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

文字的表現(xiàn)力還是有限的，如果你依然不懂，可以參考我的github。
https://github.com/logic91151...