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

Question

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

本地图采用移动设备尺寸时，此侧边栏将隐藏，并且所有过滤器都会被压缩。通过一个简单的按钮，我可以显示和隐藏过滤器。

但我有一个问题。 map 类型选择位于我的过滤器 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>

但我不建议这样做，因为控件的标记不能保证稳定，当他们更改它(例如修改类名)时，它不再起作用。

您最好隐藏内置的 MapTypeControl 并创建自己的。