在Google Maps API v3中使用单个删除按钮绘制圆/多边形 [英] Drawing Circles / Polygons With Individual Delete Buttons in Google Maps API v3
本文介绍了在Google Maps API v3中使用单个删除按钮绘制圆/多边形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将删除按钮或X标记添加到绘制的形状（圆形/多边形），以便可以使用此按钮删除单个形状？
解决方案
这是 Github链接查看图书馆，也是一个完整的工作示例。
在绘制圆圈时，删除按钮（X标记）将放置在45度（东北）在圆周上。
对于多边形，由于它们可能不可预知，因此我将删除按钮（X标记）放置在多边形的第一个顶点旁边。
您可以删除单个圆/多边形或清除绘制的所有形状。
要直接在HTML文件中调用库，请使用以下脚本：
< script src =https://gist.github.com/loyalvares/c4ba7420b1eb055b309ab48bdcd34219.js>< / script>
这是 JSFiddle Link 。
/ * *加载Google地图API时调用的方法。 * / function initMap（）{setInitialMapOptions（）; map = getMapObject（mapOptions）; drawingManager = getDrawingManagerObject（）; google.maps.event.addListener（drawingManager，'overlaycomplete'，onOverlayComplete）; initializeDeleteOverlayButtonLibrary（）; } //获取地图地理中心美国丹佛坐标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};函数setInitialMapOptions（）{mapOptions = {zoom：4，center：center，styles：[{featureType：road，elementType：geometry，stylers：[{visibility：off}]}，// turn关闭道路几何{featureType：road，elementType：labels，stylers：[{visibility：off}]}，//关闭道路标签{featureType：poi，elementType：labels ，stylers：[{visibility：off}]}，//关闭兴趣点线{featureType：poi，elementType：geometry，stylers：[{visibility：off}]}} ，//关闭兴趣点几何{featureType：transit，elementType：labels，stylers：[{visibility：off}]}，//关闭公交线标签{featureType：过渡，elementType：geometry，stylers：[{visibility：off}]}，//关闭过境线几何{featureType：administrative.land_parcel，elementType：labels，stylers：[{可见性：off}]}，//关闭管理宗地标签{featureType：admi nistrative.land_parcel，elementType：geometry，stylers：[{visibility：off}]}，//关闭管理地块几何{featureType：water，elementType：geometry，stylers：[ {color：'＃d1e1ff'}]}，//将水色设置为非常淡的蓝色{featureType：landscape，elementType：geometry，stylers：[{color：'#fffffa'}]}， //设置风景颜色为浅白色]，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}; }函数getMapObject（mapOptions）{var map = new google.maps.Map（document.getElementById（'map'），mapOptions）;返回地图; } 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（地图）;返回drawingManager; } / * - 覆盖函数从这里开始 - * / function onOverlayComplete（shape）{addDeleteButtonToOverlay（shape）; addOverlayListeners（形状）; if（listenerFiltersApplied）{listenerFiltersApplied = false; }}函数addOverlayListeners（shape）{//已应用过滤器。 if（listenerFiltersApplied）{return; } if（shape.type == google.maps.drawing.OverlayType.POLYGON）{setBoundsChangedListener（shape）; } if（shape.type == google.maps.drawing.OverlayType.CIRCLE）{setCenterChangedListener（shape）; setRadiusChangedListener（形状）; }} function setBoundsChangedListener（shape）{//为多边形的每个路径添加侦听器。 （）函数（）函数（），函数（），函数（），函数（路径，索引）{//新点google.maps.event.addListener（路径，'insert_at'，function（）{listenerFiltersApplied = true; onOverlayComplete（shape）;}） ; //指向已被移除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（）; （（deleteButtonin shape）&&（shape.deleteButton！= null））{shape.deleteButton.div.remove（）; shape.deleteButton = deleteOverlayButton; } else {shape.deleteButton = deleteOverlayButton;如果（shape.type == google.maps.drawing.OverlayType.CIRCLE）{var radiusInKms = convertDistance（Math.round（shape.overlay.getRadius（）），meters，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）; （）;（）;（）;（）（）;（）;（） }叠加[shape.uid] = shape; }函数clearAllOverlays（）{for（var shapeId in overlays）{if（overlays.hasOwnProperty（shapeId））{var shape = overlays [shapeId]; （（deleteButtonin shape）&&（shape.deleteButton！= null））{shape.deleteButton.div.remove（）; } shape.overlay.setMap（null）; }}覆盖= {}; } / * *添加需要在此方法中运行或清理的任何代码。 *此方法在DeleteOverlayButton.removeShape（）中调用。 * / function callOnDelete（shape）{if（overlay中的shape ['uid']）{delete overlays [shape ['uid']];覆盖函数在这里结束 - * / function convertDistance（distanceValue，actualDistanceUnit，expectedDistanceUnit）{var distanceInKms = 0;}} switch（actualDistanceUnit）{casemiles：distanceInKms = distanceValue / 0.62137;打破; casekms：distanceInKms = distanceValue;打破; casemeters：distanceInKms = distanceValue / 1000;打破; default：distanceInKms = undefined; } switch（expectedDistanceUnit）{casemiles：return distanceInKms * 0.62137; casekms：return distanceInKms; casemeters：return distanceInKms * 1000;默认值：return undefined; }} / * *****用于删除覆盖按钮的自定义库（启动）***** * / / * *一个允许用户删除组件的HTML按钮。 * @constructor * @作者：Loy Alvares * / function DeleteOverlayButton（）{this.div = document.createElement（'div'）; this.div.id ='deleteOverlayButton'; this.div.className ='deleteOverlayButton'; this.div.title ='删除'; this.div.innerHTML ='< span id =x> X< / span>'; var button = this; google.maps.event.addDomListener（this.div，'click'，function（）{button.removeShape（）; button.div.remove（）;}）; }函数initializeDeleteOverlayButtonLibrary（）{/ *这需要通过initMap（）* / DeleteOverlayButton.prototype = new google.maps.OverlayView（）来初始化。 / ** *添加组件到地图。 * / DeleteOverlayButton.prototype.onAdd = function（）{var deleteOverlayButton = this; var map = this.getMap（）; this.getPanes（）floatPane.appendChild（this.div）。 }; / ** *清除数据。 * / DeleteOverlayButton.prototype.onRemove = function（）{google.maps.event.removeListener（this.divListener_）; this.div.parentNode.removeChild（this.div）; //清除数据this.set（'position'）; this.set（叠加）; }; / ** *删除覆盖。 * / DeleteOverlayButton.prototype.close = function（）{this.setMap（null）; }; / ** *在圆周上的位置（以度为单位）显示按钮。 * / DeleteOverlayButton.prototype.draw = function（）{var position = this.get（'position'）; var projection = this.getProjection（）;如果（！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'; }}; / ** *在圆周上的位置（以度为单位）显示按钮。 * / DeleteOverlayButton.prototype.open = function（map，deleteOverlayButtonPosition，overlay）{this.set（'position'，deleteOverlayButtonPosition）; this.set（'overlay'，overlay）; this.setMap（地图）; this.draw（）; }; / ** *删除与之相关联的形状。 * / DeleteOverlayButton.prototype.removeShape = function（）{var position = this.get（'position'）; var shape = this.get（'overlay'）; if（shape！= null）{shape.overlay.setMap（null）; / *在下面的方法中添加任何清理代码或任何其他事件。 * / callOnDelete（shape）;返回; } this.close（）; }; Number.prototype.toRadians = function（）{return this * Math.PI / 180; } Number.prototype.toDegrees = function（）{return this * 180 / Math.PI; } / *基于经度/纬度球面大地测量公式&脚本在http://www.movable-type.co.uk/scripts/latlong.html（c）Chris Veness 2002-2010 * / google.maps.LatLng.prototype.destinationPoint = function（bearing，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））; Math.scos（距离）* Math.cos（纬度1），Math.cos（距离） - Math.sin（纬度1）* Math.sin（纬度2）var Longitude2 = longitude1 + Math.atan2（Math.sin（方位）* Math.sin ）; if（isNaN（latitude2）|| isNaN（longitude2））返回null;返回新的google.maps.LatLng（latitude2.toDegrees（），longitude2.toDegrees（））; }} / * *****删除覆盖按钮的自定义库（结束）***** * /
/ *总是显式设置地图高度以定义包含地图的div元素的大小。 * / .map {height：100％; } / *可选：使样本页面填满窗口。 * / html，body {height：100％;保证金：0;填充：0; } / *删除按钮的CSS。 * / .deleteOverlayButton {background：＃dee0df;颜色：＃000; / * font-family：'Helvetica'，'Arial'，sans-serif; * / font-size：11.4px; font-weight：bold; text-align：center;宽度：14px; height：15px; border-radius：8px; box-shadow：1px 0px -1px rgba（0，0，0，.3）;位置：绝对; padding：0px 0px 0px 0px; margin-top：7px; margin-left：8px;边界：1px固体＃999;光标：指针; } .deleteOverlayButton：hover {background：#eee; } #clearOverlays {font-family：var（ - websiteFont）;前10名％;位置：绝对;右：1％;背景：rgb（34,55,65）; border-radius：4px;白颜色; border：1px solid rgb（34,55,65）; padding：2px 6px;光标：指针; }
< div id =mapclass =地图>< / DIV> < input id ='clearOverlays'onclick =clearAllOverlays（）; type = button value =清除形状/> < link rel =stylesheettype =text / csshref =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=initMapasync defer>< / script>
This is to help people who have been trying to implement this or have been looking for this solution like I did for quite some time. Not being successful at finding an existing solution, I finally decided to do it.
How to add a Delete Button or a X mark to a drawn shape (circle / polygon) so that individual shapes can be deleted using this button?
解决方案
This is the Github Link to view the library and also a complete working example.
On drawing a circle, a delete button (X mark) would be placed at 45 degrees (north-east) on the circle circumference. For polygons, since they can be unpredictable, I am placing the delete button(X mark) next to the polygon's first vertex.
You can either delete individual circles/polygons or Clear all shapes drawn.
To directly call the library in your HTML file use the following script,
<script src="https://gist.github.com/loyalvares/c4ba7420b1eb055b309ab48bdcd34219.js"></script>
This is the JSFiddle Link to the same.
/*
* 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>
这篇关于在Google Maps API v3中使用单个删除按钮绘制圆/多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
