Перестановка пользовательских элементов управления Google Map

Question

Так что мой вопрос похож на this one, но ответ там не совсем решает мою проблему. Таким образом, у меня есть 2 элемента управления, и первый из них может свернуть/развернуть, поэтому я хочу изменить положение второго элемента управления под первым, когда первое изменяет состояние. (В другом вопросе есть сценарий, который показывает проблему. Нажмите «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. положил их обратно в документ

... конечно это приведет к некоторому визуальному эффекту (мигает)

Но нет необходимости переставлять элементы управления.

Обычно у вас не было бы проблем, если оба DOMNodes имели бы положение static .... но они расположены absolute с фиксированными координатами.

Простое решение: Поместите оба DOMNodes в оболочку и добавьте оболочку в качестве элемента управления.

Demo (желаемое поведение на 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>