【发布时间】：2015-09-26 18:39:05
【问题描述】：
我有这个谷歌脚本，可以创建形状和删除形状，但没有太多关于保存形状的内容。
我查看了互联网并知道我可以通过覆盖完成中的 getpaths() 访问路径坐标，我还可以将坐标推送到一个收集所有形状的数组中。但是，如果用户删除一个形状怎么办？或更新它？
我的问题是我不知道如何识别已删除的形状，以便我可以相应地更新形状集合数组
第二个问题是我不知道如何识别用户是否更新了形状以及更新了哪个形状。因此无法更新形状集合数组。
我需要一个解决方案，当单击保存按钮时。我可以获得地图上存在的所有形状的坐标。所以我不必关心更新或删除的内容。我目前的代码如下：
<!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>
【问题讨论】：
标签： javascript google-maps google-maps-api-3