gpt4 book ai didi

javascript - 从谷歌地图 drawingManager V3 中删除多边形

转载 作者:可可西里 更新时间:2023-11-01 01:45:49 24 4
gpt4 key购买 nike

我有一个用户可编辑的谷歌地图,用户可以使用绘图管理器在 map 上绘制覆盖多边形。这工作正常,控制台记录了我需要的经纬度。但是,我需要添加一个按钮来清除多边形的 map ,以便在出现错误时可以重新绘制。下面粘贴我的实现代码:

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);

});

map 上也有标记,可以忽略。

最佳答案

检查这段代码,听起来和你说的一模一样,一个删除形状的按钮

http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

编辑: 上面的链接已损坏,但我能够找到该代码 here .

  // 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();
}

关于javascript - 从谷歌地图 drawingManager V3 中删除多边形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11632402/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com