我有一个用户可编辑的谷歌地图,用户可以使用绘图管理器在地图上绘制叠加多边形.这工作正常,控制台记录我需要的lat lng.但是,我需要添加一个按钮来清除多边形的地图,以便如果发生错误,可以再次绘制.我的实现代码粘贴在下面：
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(<?PHP echo $latitude ?>,<?PHP echo $longitude ?>);
var myOptions = {
zoom: <?PHP echo $zoomlevel ?>,center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
marker = new google.maps.Marker({
map:map,draggable:true,animation: google.maps.Animation.DROP,position: latlng
})
pos = marker.position;
//alert(pos);
document.getElementById("gpsite-surgery-latitude").value = pos.lat();
document.getElementById("gpsite-surgery-longitude").value = pos.lng();
google.maps.event.addListener(marker,"dragend",function() {
var myLatLng = marker.latLng;
pos = marker.position;
//alert(pos);
document.getElementById("gpsite-surgery-latitude").value = pos.lat();
document.getElementById("gpsite-surgery-longitude").value = pos.lng();
})
google.maps.event.addListener(map,'zoom_changed',function() {
document.getElementById("gpsite-surgery-zoomlevel").value = map.getZoom();
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,drawingControl: true,drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,drawingModes: [google.maps.drawing.OverlayType.POLYGON]
},polygonOptions: {
fillColor: '#ffff00',fillOpacity: 0.4,strokeWeight: 3,clickable: true,zIndex: 1,editable: false
}
});
google.maps.event.addListener(drawingManager,'polygoncomplete',function (polygon) {
var coordinates = (polygon.getPath().getArray());
console.log(coordinates);
});
drawingManager.setMap(map);
});
地图上还有一个标记,您可以忽略这一点.
提前致谢
解决方法
检查这个代码,它听起来就像你在说的,一个按钮来删除形状
http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html
// globals
var drawingManager;
var selectedShape;
...
function clearSelection() {
if (selectedShape) {
selectedShape.setEditable(false);
selectedShape = null;
}
}
function setSelection(shape) {
clearSelection();
selectedShape = shape;
shape.setEditable(true);
selectColor(shape.get('fillColor') || shape.get('strokeColor'));
}
function deleteSelectedShape() {
if (selectedShape) {
selectedShape.setMap(null);
}
}
google.maps.event.addListener(drawingManager,'overlaycomplete',function(e) {
if (e.type != google.maps.drawing.OverlayType.MARKER) {
// Switch back to non-drawing mode after drawing a shape.
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);
}
});
// 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,clearSelection);
google.maps.event.addDomListener(document.getElementById('delete-button'),deleteSelectedShape);
buildColorPalette();
}
