У меня есть веб-сайт, который представляет собой одностраничную форму с Google Map в качестве одного из шагов формы. Карта Google создается с использованием их JavaScript API.
Пользователь вводит свой адрес, и карта загружает этот адрес, где пользователь может затем нарисовать многоугольник над своей крышей, и я получу площадь этого многоугольника.
Когда пользователь заходит на веб-сайт, поверх карты появляется наложение с вводом и кнопкой. После ввода адреса карта загружает адрес и наложение исчезает.
На карте также есть две пользовательские кнопки: одна для очистки карты и кнопка возврата, которая снова показывает наложение, и пользователь может ввести новый адрес.
Вот весь мой код, который связан с загрузкой и очисткой карты:
Функция initMap, которая также создает две кнопки.
function initMap() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl: false,
center: {
lat: 40.2474449,
lng: -5.7720482
}
});
var centerControlDiv = document.createElement('div');
var centerControl = new MapControl(centerControlDiv);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
centerControlDiv.className = "mapControl";
map.setTilt(0);
}
Функция showMap, которая вызывается при отправке оверлея:
function showMap() {
var zipCode = document.getElementById("postalCode").value;
geocoder.geocode({
'address': zipCode + " España"
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
allowDrawing();
$(".mapCover").fadeOut(300);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Функция allowDrawing, которая позволяет пользователю рисовать на карте:
function allowDrawing() {
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
polygonOptions: {
fillColor: 'rgba(0, 212, 153, 0.4)',
strokeColor: "rgb(0, 212, 153)",
fillOpacity: 1,
strokeWeight: 4,
editable: true
}
});
drawingManager.setMap(map);
polygon && polygon.setMap(null);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function (plgn) {
polygon = plgn;
drawingManager.setDrawingMode(null);
calcArea(polygon);
google.maps.event.addListener(polygon.getPath(), 'insert_at', function () {
calcArea(polygon);
});
google.maps.event.addListener(polygon.getPath(), 'set_at', function () {
calcArea(polygon);
});
google.maps.event.addListener(polygon.getPath(), 'remove_at', function () {
calcArea(polygon);
});
});
}
Кнопка очистки карты просто вызывает функцию рисования, а кнопка возврата вызывает функцию отображения карты.
Поскольку я хочу, чтобы за один раз рисовался только один многоугольник, и многоугольник можно редактировать, когда многоугольник завершен, я делаю это: drawingManager.setDrawingMode(null);, так что рисование теперь отключено, и пользователь может редактировать фигуру.
Моя проблема в том, что все работает как надо, кроме случаев, когда нажата кнопка «Назад», когда нет многоугольника. Когда это происходит, drawingMode не устанавливается для drawingManager, и пользователь может продолжать рисовать столько фигур, сколько пожелает. Это очень странная проблема, поскольку она не возникает, когда вызывается функция очистки карты или пользователь нажимает кнопку «Назад» без очистки карты.
Я пробовал несколько вещей, таких как удаление любых слушателей менеджера рисования, но ничего не работает, кроме одной вещи. Который должен вызывать функцию initMap каждый раз, когда пользователь отправляет оверлей.
Это не кажется разумным делом, снова и снова вызывая initMap, поскольку все, что мне нужно, это центрировать карту по новому адресу и снова включить рисование.
Любая помощь приветствуется.
Вот пример JSFiddle , показывающий проблему.