这是为了帮助那些一直试图实现这个目标的人，或者像我一样寻找这个解决方案已经有一段时间了。我没有成功找到现有的解决方案，我最终决定这样做。
如何将删除按钮或X标记添加到绘制的形状（圆形/多边形），以便可以使用此按钮删除单个形状？
答案 0 :(得分：3)
这是查看库的Github Link，也是一个完整的工作示例。
在绘制圆形时，删除按钮（X标记）将放置在圆周上45度（东北）。 对于多边形，由于它们可能无法预测，我将删除按钮（X标记）放在多边形的第一个顶点旁边。
您可以删除单个圆圈/多边形或清除所有绘制的形状。
要直接调用HTML文件中的库，请使用以下脚本，
<script src="https://gist.github.com/loyalvares/c4ba7420b1eb055b309ab48bdcd34219.js"></script>
这是同一个JSFiddle Link。
/*
* Method that is called when Google Maps API is loaded.
*/
function initMap() {
setInitialMapOptions();
map = getMapObject(mapOptions);
drawingManager = getDrawingManagerObject();
google.maps.event.addListener(drawingManager, 'overlaycomplete', onOverlayComplete);
initializeDeleteOverlayButtonLibrary();
}
// Get Map Geo Center Denver, USA Coordinates
var center = {lat: 39.810866, lng: -104.990347};
var map, drawingManager, mapOptions = {};
var listenerFiltersApplied = false;
var overlays = {};
var circleOptions = {
fillColor: "#e20000",
fillOpacity: 0,
strokeColor: "#e20000",
strokeWeight: 4,
strokeOpacity: 1,
clickable: false,
editable: true,
suppressUndo: true,
zIndex: 999
};
var polygonOptions = {
editable: true,
fillColor: "#e20000",
fillOpacity: 0,
strokeColor: "#e20000",
strokeWeight: 4,
strokeOpacity: 1,
suppressUndo: true,
zIndex: 999
};
function setInitialMapOptions() {
mapOptions = {
zoom: 4,
center: center,
styles: [
{"featureType":"road", elementType:"geometry", stylers: [{visibility:"off"}]}, //turns off roads geometry
{"featureType":"road", elementType:"labels", stylers: [{visibility:"off"}]}, //turns off roads labels
{"featureType":"poi", elementType:"labels", stylers: [{visibility:"off"}]}, //turns off points of interest lines
{"featureType":"poi", elementType:"geometry", stylers: [{visibility:"off"}]}, //turns off points of interest geometry
{"featureType":"transit", elementType:"labels", stylers: [{visibility:"off"}]}, //turns off transit lines labels
{"featureType":"transit", elementType:"geometry", stylers: [{visibility:"off"}]}, //turns off transit lines geometry
{"featureType":"administrative.land_parcel", elementType:"labels", stylers: [{visibility:"off"}]}, //turns off administrative land parcel labels
{"featureType":"administrative.land_parcel", elementType:"geometry", stylers: [{visibility:"off"}]}, //turns off administrative land parcel geometry
{"featureType":"water", elementType:"geometry", stylers: [{color: '#d1e1ff'}]}, //sets water color to a very light blue
{"featureType":"landscape", elementType:"geometry", stylers: [{color: '#fffffa'}]}, //sets landscape color to a light white color
],
mapTypeControl: false,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
streetViewControl: false,
scaleControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
minZoom: 2
};
}
function getMapObject(mapOptions) {
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
return map;
}
function getDrawingManagerObject(drawingManagerOptions) {
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON
]
},
circleOptions: circleOptions,
polygonOptions: polygonOptions
});
drawingManager.setMap(map);
return drawingManager;
}
/* -- Overlay Functions Begin Here -- */
function onOverlayComplete(shape) {
addDeleteButtonToOverlay(shape);
addOverlayListeners(shape);
if(listenerFiltersApplied) {
listenerFiltersApplied = false;
}
}
function addOverlayListeners(shape) {
// Filters already applied.
if(listenerFiltersApplied) {
return;
}
if (shape.type == google.maps.drawing.OverlayType.POLYGON) {
setBoundsChangedListener(shape);
}
if (shape.type == google.maps.drawing.OverlayType.CIRCLE) {
setCenterChangedListener(shape);
setRadiusChangedListener(shape);
}
}
function setBoundsChangedListener(shape) {
// Add listeners for each path of the polygon.
shape.overlay.getPaths().forEach(function(path, index){
// New point
google.maps.event.addListener(path, 'insert_at', function(){
listenerFiltersApplied = true;
onOverlayComplete(shape);
});
// Point was removed
google.maps.event.addListener(path, 'remove_at', function(){
listenerFiltersApplied = true;
onOverlayComplete(shape);
});
// Point was moved
google.maps.event.addListener(path, 'set_at', function(){
listenerFiltersApplied = true;
onOverlayComplete(shape);
});
});
}
function setCenterChangedListener(shape) {
google.maps.event.addListener(shape.overlay, 'center_changed', function() {
listenerFiltersApplied = true;
onOverlayComplete(shape);
});
}
function setRadiusChangedListener(shape) {
google.maps.event.addListener(shape.overlay, 'radius_changed', function() {
listenerFiltersApplied = true;
onOverlayComplete(shape);
});
}
function addDeleteButtonToOverlay(shape) {
var deleteOverlayButton = new DeleteOverlayButton();
if(("deleteButton" in shape) && (shape.deleteButton != null)) {
shape.deleteButton.div.remove();
shape.deleteButton = deleteOverlayButton;
} else {
shape.deleteButton = deleteOverlayButton;
}
if(shape.type == google.maps.drawing.OverlayType.CIRCLE) {
var radiusInKms = convertDistance(Math.round(shape.overlay.getRadius()), "metres", "kms");
var circleCenter = new google.maps.LatLng(shape.overlay.getCenter().lat(), shape.overlay.getCenter().lng());
var deleteOverlayButtonPosition = circleCenter.destinationPoint(30, radiusInKms);
deleteOverlayButton.open(map, deleteOverlayButtonPosition, shape);
} else if (shape.type == google.maps.drawing.OverlayType.POLYGON) {
deleteOverlayButton.open(map, shape.overlay.getPath().getArray()[0], shape);
}
if (!('uid' in shape)) {
shape.uid = Math.random().toString(36).substring(2) + (new Date()).getTime().toString(36);
}
overlays[shape.uid] = shape;
}
function clearAllOverlays() {
for(var shapeId in overlays) {
if(overlays.hasOwnProperty(shapeId)) {
var shape = overlays[shapeId];
if(("deleteButton" in shape) && (shape.deleteButton != null)) {
shape.deleteButton.div.remove();
}
shape.overlay.setMap(null);
}
}
overlays = {};
}
/*
* Add any code that needs to be run or cleaned up in this method.
* This method is called in DeleteOverlayButton.removeShape().
*/
function callOnDelete(shape) {
if(shape['uid'] in overlays) {
delete overlays[shape['uid']];
}
}
/* -- Overlay Functions End Here -- */
function convertDistance(distanceValue, actualDistanceUnit, expectedDistanceUnit) {
var distanceInKms = 0;
switch(actualDistanceUnit) {
case "miles":
distanceInKms = distanceValue/0.62137;
break;
case "kms":
distanceInKms = distanceValue;
break;
case "metres":
distanceInKms = distanceValue/1000;
break;
default:
distanceInKms = undefined;
}
switch(expectedDistanceUnit) {
case "miles":
return distanceInKms * 0.62137;
case "kms":
return distanceInKms;
case "metres":
return distanceInKms * 1000;
default:
return undefined;
}
}
/* ***** Custom Library for Delete Overlay Button (Start) ***** */
/**
* A HTML Button that lets a user delete a component.
* @constructor
* @author: Loy Alvares
*/
function DeleteOverlayButton() {
this.div = document.createElement('div');
this.div.id = 'deleteOverlayButton';
this.div.className = 'deleteOverlayButton';
this.div.title = 'Delete';
this.div.innerHTML = '<span id="x">X</span>';
var button = this;
google.maps.event.addDomListener(this.div, 'click', function() {
button.removeShape();
button.div.remove();
});
}
function initializeDeleteOverlayButtonLibrary() {
/* This needs to be initialized by initMap() */
DeleteOverlayButton.prototype = new google.maps.OverlayView();
/**
* Add component to map.
*/
DeleteOverlayButton.prototype.onAdd = function() {
var deleteOverlayButton = this;
var map = this.getMap();
this.getPanes().floatPane.appendChild(this.div);
};
/**
* Clear data.
*/
DeleteOverlayButton.prototype.onRemove = function() {
google.maps.event.removeListener(this.divListener_);
this.div.parentNode.removeChild(this.div);
// Clear data
this.set('position');
this.set('overlay');
};
/**
* Deletes an overlay.
*/
DeleteOverlayButton.prototype.close = function() {
this.setMap(null);
};
/**
* Displays the Button at the position(in degrees) on the circle's circumference.
*/
DeleteOverlayButton.prototype.draw = function() {
var position = this.get('position');
var projection = this.getProjection();
if (!position || !projection) {
return;
}
var point = projection.fromLatLngToDivPixel(position);
this.div.style.top = point.y + 'px';
this.div.style.left = point.x + 'px';
if(this.get('overlay').type == google.maps.drawing.OverlayType.POLYGON) {
this.div.style.marginTop = '-16px';
this.div.style.marginLeft = '0px';
}
};
/**
* Displays the Button at the position(in degrees) on the circle's circumference.
*/
DeleteOverlayButton.prototype.open = function(map, deleteOverlayButtonPosition, overlay) {
this.set('position', deleteOverlayButtonPosition);
this.set('overlay', overlay);
this.setMap(map);
this.draw();
};
/**
* Deletes the shape it is associated with.
*/
DeleteOverlayButton.prototype.removeShape = function() {
var position = this.get('position');
var shape = this.get('overlay');
if (shape != null) {
shape.overlay.setMap(null);
/* Add any cleanup code or any other events in the below method. */
callOnDelete(shape);
return;
}
this.close();
};
Number.prototype.toRadians = function() {
return this * Math.PI / 180;
}
Number.prototype.toDegrees = function() {
return this * 180 / Math.PI;
}
/* Based the on the Latitude/Longitude spherical geodesy formulae & scripts
at http://www.movable-type.co.uk/scripts/latlong.html
(c) Chris Veness 2002-2010
*/
google.maps.LatLng.prototype.destinationPoint = function(bearing, distance) {
distance = distance / 6371;
bearing = bearing.toRadians();
var latitude1 = this.lat().toRadians(), longitude1 = this.lng().toRadians();
var latitude2 = Math.asin(Math.sin(latitude1) * Math.cos(distance) + Math.cos(latitude1) * Math.sin(distance) * Math.cos(bearing));
var longitude2 = longitude1 + Math.atan2(Math.sin(bearing) * Math.sin(distance) * Math.cos(latitude1), Math.cos(distance) - Math.sin(latitude1) * Math.sin(latitude2));
if (isNaN(latitude2) || isNaN(longitude2)) return null;
return new google.maps.LatLng(latitude2.toDegrees(), longitude2.toDegrees());
}
}
/* ***** Custom Library for Delete Overlay Button (End) ***** *//* Always set the map height explicitly to define the size of the div element that contains the map. */
.map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* CSS for the Delete Button. */
.deleteOverlayButton {
background: #dee0df;
color: #000;
/* font-family: 'Helvetica', 'Arial', sans-serif; */
font-size: 11.4px;
font-weight: bold;
text-align: center;
width: 14px;
height: 15px;
border-radius: 8px;
box-shadow: 1px 0px -1px rgba(0, 0, 0, .3);
position: absolute;
padding: 0px 0px 0px 0px;
margin-top: 7px;
margin-left: 8px;
border: 1px solid #999;
cursor: pointer;
}
.deleteOverlayButton:hover {
background: #eee;
}
#clearOverlays {
font-family: var(--websiteFont);
top: 10%;
position: absolute;
right: 1%;
background: rgb(34,55,65);
border-radius: 4px;
color: white;
border: 1px solid rgb(34,55,65);
padding: 2px 6px;
cursor: pointer;
}<div id="map" class="map"></div>
<input id='clearOverlays' onclick="clearAllOverlays();" type=button value="Clear Shapes" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7MXQvcn_gskiZeZGhhXekqN1zjUX9fVM&libraries=drawing&callback=initMap" async defer></script>