3
我有這個谷歌腳本，可以創建形狀和刪除形狀，但沒有什麼太多關於保存形狀。谷歌地圖API v3如何獲取所有形狀的座標
我查了一下互聯網，知道我可以通過overlaycomplete中的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>
OMG第是很好的解決方案。 –
存在問題，刪除功能對從數據庫或本地存儲裝載的形狀不起作用。它看起來像頁面重新加載時參考不再存在。 –
爲什麼要這樣，它只關心用戶繪製的形狀。當你想自動添加形狀時（例如，先前調用'save'方法返回的形狀），還必須將它們'添加'到'集合'中。我已經添加了一個例子。 –