У меня есть этот скрипт google, который может создавать форму и удалять форму, но ничего особенного в сохранении фигур.google map API v3 как получить координаты всех фигур
Я искал интернет и знал, что могу получить доступ к координатам путей через getpaths() внутри overlaycomplete. И я также могу направить координаты в массив, который собирает все фигуры. Однако, что, если пользователь удалит форму? или обновить его?
Моя проблема, я понятия не имею, как определить удаленную форму, так что я могу обновить массив коллекции формы соответственно
Вторая проблема, я понятия не имею, как определить, если пользователь обновил форму и какую форму обновлен. Поэтому невозможно обновить массив коллекции фигур.
Мне нужно решение, которое при нажатии кнопки «Сохранить». Я могу получить все координаты фигур, существующих на карте. Поэтому мне не нужно было бы заботиться о том, что было обновлено или удалено. Мой текущий код, как показано ниже:
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,geometry,places"></script>
<style>
#map,html,body{
height:100%;
margin:0;
padding:0;
}
#delete-button, #save-button {
margin-top: 5px;
position:absolute;
z-index:999;
right:6%;
top:3%;
}
#save-button{
right:1%;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="delete-button" class="btn">Delete seleted shape</button>
<button id="save-button" class="btn" onclick="save();">Save all</button>
<script>
var drawingManager;
var selectedShape;
var shapeCollection = [];
function save(){
console.log(shapeCollection);
}
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom:10,
center: new google.maps.LatLng(22.344, 114.048),
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
var polyOptions = {
strokeWeight: 3,
fillOpacity: 0.2,
editable: true,
draggable: true
};
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: true,
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},
drawingMode: google.maps.drawing.OverlayType.POLYGON,
polygonOptions: polyOptions,
map: map
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
drawingManager.setDrawingMode(null);
// Add an event listener that selects the newly-drawn shape when the user
// mouses down on it.
var newShape = e.overlay;
newShape.type = e.type;
google.maps.event.addListener(newShape, 'click', function() {
setSelection(newShape);
});
setSelection(newShape);
});
//polygonPoints will be the array and index of the array will be the order
// Clear the current selection when the drawing mode is changed, or when the
// map is clicked.
google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
google.maps.event.addListener(map, 'click', clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
OMG-й это отличное решение. –
Существует проблема, функция удаления не будет работать над формой, загруженной из базы данных или локального хранилища. Похоже, что эта ссылка больше не существует при перезагрузке страницы. –
Зачем ему это делать, оно заботится только о фигурах, нарисованных пользователем. Если вы хотите автоматически добавлять фигуры (например, формы, возвращаемые предыдущим вызовом метода 'save'), вы также должны« добавлять »их в' collection'. Я добавил пример. –