Question

所以我的问题类似于this one，但那里的答案并没有完全解决我的问题。所以我有2个控件，第一个可以折叠/展开，所以我想在第一个改变'state'时将第二个控件重新定位在第一个控件下面。（另一个问题有一个显示问题的小提示。单击“切换”，所有控件都在右侧相互重叠，然后鼠标悬停在缩放上并正确地重新定位控件。）

是否有一些事件或方法我缺少以编程方式重新定位这些？就像其他问题提到的那样，当你将鼠标悬停在缩放控件上时，控件会自行重新定位，但我找不到如何手动触发它。

这是我尝试过的，它有效，但它很笨重，使控件闪烁。

map.controls[google.maps.ControlPosition.LEFT_TOP].clear();
map.controls[google.maps.ControlPosition.LEFT_TOP].push(control1);  
map.controls[google.maps.ControlPosition.LEFT_TOP].push(control2);

谢谢！

Answer 1

基本上这不是“问题”，当你“重新定位”控件（控件是DOMNodes）时：

从文档中删除节点
将它们放回文件

...当然这会产生一些视觉效果（眨眼）

但是没有必要重新定位控件。

通常，当两个DOMNode都具有static位置时，您就不会遇到问题....但它们位于absolute的固定坐标位置。

简单的解决方案：将两个DOMNode放入包装器中，并将包装器添加为控件。

演示（LEFT_TOP上的所需行为）：

function init() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 1,
    center: new google.maps.LatLng(0, 0),
    disableDefaultUI: true,
    noClear: true
  });

  map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('ctrl'));
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(document.getElementById('ctrl_3'));
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(document.getElementById('ctrl_4'));
}
google.maps.event.addDomListener(window, 'load', initialize);

       html,
       body,
       #map_canvas {
         height: 100%;
         margin: 0;
         padding: 0
       }
       #map_canvas>div[id^='ctrl']{
         display:none;
       }
       div[id^='ctrl_'] {
         padding: 12px;
         background: #fff;
         margin: 0 2px;
         cursor: pointer;
         border:1px solid #000;
       }
       div[id^='ctrl_']:hover {
         height: 80px;
         background: red;
       }
       div[id^='ctrl_']:hover::after {
         content: 'collapsed #' attr(id);
         display: block;
       }

<div id="map_canvas">
  <div id="ctrl">
    <div id="ctrl_1">ctrl1</div>
    <div id="ctrl_2">ctrl2</div>
  </div>
  <div id="ctrl_3">ctrl3</div>
  <div id="ctrl_4">ctrl4</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&callback=init"></script>

重新定位自定义谷歌地图控件

1 个答案: