javascript - Google Maps-将 map 类型选择插入div

我有一个响应式地图，右侧有一个过滤器布局。

如果地图为移动尺寸，则该边栏将隐藏，并且所有过滤器都将被压缩。使用一个简单的按钮，我可以显示和隐藏过滤器。

 

但是我有一个问题。映射类型选择在我的过滤器div之外，我也想将其隐藏。

我该怎么做？

最佳答案

基本上没有对代表内置控件的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并创建自己的MapTypeControl。

关于javascript - Google Maps-将 map 类型选择插入div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31552952/