Javascript 绘制后单击按钮删除多边形
我尝试开发一个应用程序，用户可以在谷歌地图中绘制多边形，并在弹出的信息窗口中添加有关多边形的附加信息。信息输入完成后，用户应单击“保存”保存信息，如果多边形应删除，则单击“删除”。我所说的删除是指在地图上不再可见 我尝试了以下代码，但没有成功。问题似乎是底部“deletePolygon”函数的范围。输入Javascript 绘制后单击按钮删除多边形,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我尝试开发一个应用程序，用户可以在谷歌地图中绘制多边形，并在弹出的信息窗口中添加有关多边形的附加信息。信息输入完成后，用户应单击“保存”保存信息，如果多边形应删除，则单击“删除”。我所说的删除是指在地图上不再可见 我尝试了以下代码，但没有成功。问题似乎是底部“deletePolygon”函数的范围。输入polygon.setMap（null）在google.maps.event.addListener函数中，它从地图中删除多边形，但我不知道如何在单击按钮时触发它 注：我将整个脚本粘贴在JSFID
polygon.setMap（null）google.maps.event.addListener
绘图工具
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
宽度：1200px；
高度：800px；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
//他是埃因斯特伦·弗尔登·舒茨先生
var映射；
var信息窗口；
//格伦德卡特埃因斯特伦根酒店
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
纬度：49.819227，
液化天然气：19.230721
},
缩放：13
});
//Einstellungen des图纸管理器
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlayType.null，//Zeichnen Standardmäig nicht ausgewählt wenn die Karte geladen wird（备选方案：多边形、标记等）
drawingControl:true，//绘图管理员wird angezeigt
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP\u CENTER，//位置des绘图管理器
绘图模式：['polygon']//Auswahlmöglichkeiten der Werkzeuge:'marker'、'circle'、'polygon'、'polygon'、'Polygoline'、'rectangle'
},
//Optionen-zur-Darstellung多边形
多克隆选择：{
fillColor:“#ffff00”，//Farbwahl
填充不透明度：0.5，
冲程重量：3，
可点击：false，//erweiterte函数
可编辑：false，
zIndex:1
}
});
drawingManager.setMap（map）；
//在探测器上安装一个信息盒
函数polyConcenter（poly）{
var lowx，
highx，
洛伊，
嗨，
lats=[]，
lngs=[]，
顶点=poly.getPath（）；
对于（var i=0；iinfoWindow<!DOCTYPE html>
<html>
<head>
<title>Drawing Tools</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
width: 1200px;
height: 800px;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
var map;
var infoWindow;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 49.819227,
lng: 19.230721
},
zoom: 13
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.null,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon']
},
polygonOptions: {
fillColor: '#ffff00',
fillOpacity: 0.5,
strokeWeight: 3,
clickable: false,
editable: false,
zIndex: 1
}
});
drawingManager.setMap(map);
function polygonCenter(poly) {
var lowx,
highx,
lowy,
highy,
lats = [],
lngs = [],
vertices = poly.getPath();
for (var i = 0; i < vertices.length; i++) {
lngs.push(vertices.getAt(i).lng());
lats.push(vertices.getAt(i).lat());
}
lats.sort();
lngs.sort();
lowx = lats[0];
highx = lats[vertices.length - 1];
lowy = lngs[0];
highy = lngs[vertices.length - 1];
center_x = lowx + ((highx - lowx) / 2);
center_y = lowy + ((highy - lowy) / 2);
return (new google.maps.LatLng(center_x, center_y));
}
/*
remove inline event handlers from HTML
and assign dynamically when the content
is actually loaded into the DOM
*/
html = "<table>" +
"<tr>" +
"<td>Bezeichnung:</td>" +
"<td><input type='text' id='feldbezeichnung'/> </td>" +
"</tr>" +
"<tr>" +
"<td><input type='button' value='save' data-action='save' /></td>" +
"<td><input type='button' value='delete' data-action='delete' /></td>" +
"</tr>";
google.maps.event.addListener(drawingManager, 'polygoncomplete', function( polygon ) {
drawingManager.setDrawingMode(null);
var InfoBoxLoc = polygonCenter(polygon);
infowindow = new google.maps.InfoWindow({
content: html,
position: InfoBoxLoc,
});
infowindow.open(map);
/*
The `infoWindow` will fire a `ready` event when it is loaded and, as you are loading HTML data into
an infoWindow, it makes sense to watch for that event and assign event listeners accrdingly to any
child elements
*/
google.maps.event.addListener( infowindow, 'domready', event => {
/*
Obtain a reference to the buttons `save` and `delete`
and assign event listeners
*/
document.querySelector('td > input[type="button"][data-action="save"]').addEventListener('click', e=>{
let fieldname = escape( document.getElementById("feldbezeichnung").value )
console.log( fieldname )
infowindow.close();
});
document.querySelector( 'td > input[type="button"][data-action="delete"]' ).addEventListener('click', e=>{
infowindow.close();
console.log(polygon)
polygon.setMap(null);
});
});
});
}
</script>
<script src="//maps.googleapis.com/maps/api/js?key=APIKEY&libraries=drawing&callback=initMap" async defer></script>
</head>
<body>
<div id="map"></div>
</body>
</html>
绘图工具
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
宽度：1200px；
高度：800px；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}
var映射；
var信息窗口；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
纬度：49.819227，
液化天然气：19.230721
},
缩放：13
});
var drawingManager=new google.maps.drawing.drawingManager({
drawingMode:google.maps.drawing.OverlyType.null，
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[“多边形”]
},
多克隆选择：{
填充颜色：'#ffff00'，
填充不透明度：0.5，
冲程重量：3，
可点击：f