У меня есть карта на странице, которая отображает несколько мест с маркерами и информационными окнами. Теперь я хотел бы поставить полноэкранную кнопку и загрузить карту в диалоговое окно jquery-ui, но у меня есть некоторые проблемы.
Есть ли способ скопировать экземпляр карты Google, который я создал в одном div, в другой div?
Или любой другой обходной путь, например изменение div, связанного с картой... научная фантастика??
Я не думаю, что сами Карты Google поддерживают такие манипуляции.
Хотя кажется, что перемещать карту довольно просто. У карты есть метод getDiv, который возвращает Node, содержащий карту. Используя jQuery, вы можете манипулировать DOM:
var mapNode = that.map.getDiv();
$('#destinationDiv').append(mapNode);
Он просто перемещает div карты в targetDiv. Я протестировал его в 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;
}
