У меня есть карта на странице, которая отображает несколько мест с маркерами и infowindows. Теперь я хочу поместить полноэкранную кнопку и загрузить карту в диалог jquery-ui, но у меня есть некоторые проблемы.
Есть ли способ скопировать экземпляр карты Google, который я создал в одном div, в другой div?
Или любое другое обходное решение, такое как изменение div, связанного с картой... научная фантастика
Я не думаю, что сами Google Maps поддерживают такую манипуляцию.
Хотя кажется, что перемещение карты довольно просто. На карте есть метод getDiv, который возвращает Node, содержащий карту. Используя jQuery, вы можете затем манипулировать DOM:
var mapNode = that.map.getDiv();
$('#destinationDiv').append(mapNode);
Он просто перемещает карту div в destinationDiv. Я тестировал его в Chrome и Firefox, и он работал хорошо, но я не уверен, что он работает правильно (если функциональность карты не сломана) во всех основных браузерах.
Но мне не удалось копировать карту. Использование метода клонирования jQuery создает сломанную копию карты. Если вам нужно скопировать его, я думаю, что единственным способом может быть создание совершенно новой карты и создание всех объектов с нуля.
Просто для того, чтобы включить более полный пример кода из недавнего проекта, в котором использовалось решение, представленное здесь:
// init map
if(!$scope.map) {
console.log("no $scope.map");
if (!window.globalMap) {
console.log("initializing new main map");
window.globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);
}
else {
console.log("recycling map, with options:", mapOptions);
var mapNode = window.globalMap.getDiv();
$('#map').append(mapNode);
window.globalMap.setOptions(mapOptions);
google.maps.event.trigger(globalMap, "resize");
}
$scope.map = window.globalMap;
}