谷歌地圖 - 插入地圖類型選擇到div

Question

我有一個響應式地圖，在右側的過濾器佈局。

當地圖處於移動尺寸時，此邊欄變爲隱藏狀態，並且所有濾鏡都被壓縮。用一個簡單的按鈕，我可以顯示和隱藏過濾器。

但是我有一個問題。地圖類型選擇位於我的過濾器div之外，我也想將它隱藏起來。

我該怎麼辦？

Answer 1

基本上沒有代表內置控件的DOMNode的基於API的訪問。

但是你可能嘗試找到他們的文檔中，目前這種控制確實有一個className gm-style-mtc，使用querySelector找到它並appendChild把它要：

//wait for the idle-event, it takes some time until the control 
    //has been added to the document 
    google.maps.event.addListenerOnce(mapInstance,'idle',function(){ 
     targetNode.appendChild(this.getDiv().querySelector('div.gm-style-mtc')); 
    }); 

樣品（你」也馬上需要調整控制一些CSS-設置）：

 function initialize() { 
 
     var map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
      zoom: 14, 
 
      center: new google.maps.LatLng(52.549, 13.425), 
 
      noClear: true, 
 
      mapTypeControlOptions: { 
 
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
      } 
 
      }), 
 
      bar = document.getElementById('sidebar'); 
 

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

 
     google.maps.event.addListenerOnce(map, 'idle', function() { 
 
      document.getElementById('mtc') 
 
      .appendChild(this.getDiv().querySelector('div.gm-style-mtc')); 
 
     }); 
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize);

 html, 
 
     body, 
 
     #map_canvas { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0 
 
     } 
 
     #sidebar { 
 
     background: blue; 
 
     padding: 6px; 
 
     border-radius: 6px; 
 
     color: #fff; 
 
     position: absolute; 
 
     top:40px !important; 
 
     } 
 
     #sidebar>* { 
 
     display: none; 
 
     font-size: 1.2em; 
 
     } 
 
     #sidebar.expanded>* { 
 
     display: block !important; 
 
     } 
 
     #sidebar h3 { 
 
     font-weight: bold; 
 
     text-align: center; 
 
     font-size: 1.5em; 
 
     cursor: pointer; 
 
     display: block !important; 
 
     padding: 2px; 
 
     margin: 2px; 
 
     } 
 
     #sidebar.expanded>h3:first-child { 
 
     border-bottom: 1px solid #fff; 
 
     } 
 
     #sidebar #mtc { 
 
     min-width: 120px; 
 
     text-align: center; 
 
     padding-bottom: 10px; 
 
     } 
 
     #sidebar #mtc>div { 
 
     position: relative !important; 
 
     display: inline-block !important; 
 
     }

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 
 
<div id="map_canvas"> 
 
    <div id="sidebar"> 
 
    <h3 onclick="this.parentNode.className=(this.parentNode.className=='expanded')?'':'expanded'">☰&nbsp; Menú</h3> 
 

 
    <strong>Filter#1</strong> 
 
    <strong>Filter#2</strong> 
 
    <strong>Filter#3</strong> 
 
    <div id="mtc"></div> 
 

 
    </div> 
 
</div>

但我不會建議它，因爲控件的標記不保證穩定，當它們改變時（例如，修改className）它不再工作。

您最好隱藏內置的MapTypeControl並創建自己的。