从谷歌地图drawingManager V3中删除多边形
我有一个用户可编辑的谷歌地图,用户可以使用绘图管理器在地图上绘制叠加多边形。 这工作正常,控制台记录我需要的lat lngs。 但是,我需要添加一个清除多边形地图的按钮,以便在出错时再次绘制..我的实现代码粘贴在下面:
geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(, ); var myOptions = { zoom: , 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, 'click', clearSelection); google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape); buildColorPalette(); }
您需要在全局上下文中引用多边形。 然后在按钮调用polygon.setMap(null)的click处理函数中(其中polygon是对多边形的全局引用,无法从您发布的不完整代码段中判断它是否为全局)