重新定位自定义的google地图控件

Question

因此，我的问题类似于this one，但答案并不能很好地解决我的问题。因此，我有两个控件，第一个控件可以折叠/展开，所以当第一个控件更改‘状态’时，我想在第一个控件下面重新定位第二个控件。(另一个问题有一个小提琴，说明了问题。单击"Toggle"，所有控件都在右上方，然后鼠标按下缩放，控件将被正确地重新定位)。

是否有什么事件，或方法，我错过了重新定位这些程序？就像另一个问题提到的那样，例如，当您在缩放控件上悬停时，控件会自行重新定位，但我无法找到如何手动启动该控件。

这就是我尝试过的，它能工作，但它笨重，使控件闪烁。

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)时：

1. 从文档中删除节点
2. 把它们放回文件里

...of课程，这会产生一些视觉效果(眨眼)

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

通常，当两个DOMNodes都有一个static position....but时，您就不会有问题了--它们用固定的坐标定位absolute。

简单的解决方案:将两个DOMNodes都放入一个包装程序中，并添加包装器作为控件。

演示(在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>

​