Javascript 如何从谷歌地图中删除多边形

我正在尝试制作一个web应用程序类型的东西，您可以在地图上定义一个区域，它会告诉您该区域的大小

此时，只要将新的“点”添加到区域轮廓中，区域就会更新

我有两个问题

首先，我似乎不知道在编辑面积时如何更新面积大小计算。（如中所示，移动现有点时）

而且，我一辈子都不知道如何删除或重置多边形

我的HTML

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<div id="right-panel">
  <p>Area:</p>
  <p><textarea id="areaValue"></textarea>m</p>
  <p id="clearPoly">Clear</button>
</div>

看看这个：

看。您需要收听多边形路径的编辑事件：

多边形

• 插入
• 移除
• 置

侦听器必须设置在多边形的路径上。如果多边形有多条路径，则必须在每条路径上设置侦听器

将计算面积的代码移动到函数（

calcArea

）中，并在这些事件中调用该函数

poly = new google.maps.Polygon({
  strokeColor: '#f32222',
  strokeOpacity: 1,
  strokeWeight: 3,
  editable: true,
  map: map
});
google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);

function calcArea() {
  var path = poly.getPath();
  area = google.maps.geometry.spherical.computeArea(path);
  area = (Math.trunc(area));
  document.getElementById("areaValue").value = area;
}

清除多边形后，将其路径设置回空数组，然后重新添加这些事件侦听器：

document.getElementById("clearPoly").onclick = function() {
  area = 0;
  document.getElementById("areaValue").value = area;
  poly.setPath([]);
  path = poly.getPath();
  google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
  google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);
}

代码片段：

var-poly；
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：9，
mapTypeId:'卫星'，
中心：{
拉脱维亚：52.486741，
液化天然气：-2.8055232
}
});
var面积=0；
//创建搜索框并将其链接到UI元素。
var input=document.getElementById（'pac-input'）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
//将搜索框结果偏向当前地图的视口。
addListener（'bounds_changed'，function（）{
searchBox.setBounds（map.getBounds（））；
});
var标记=[]；
//侦听用户选择预测并检索时激发的事件
//关于那个地方的更多细节。
searchBox.addListener（'places\u changed'，function（）{
var places=searchBox.getPlaces（）；
如果（places.length==0）{
返回；
}
//清除旧的标记。
markers.forEach（函数（marker）{
marker.setMap（空）；
});
标记=[]；
//对于每个位置，获取图标、名称和位置。
var bounds=new google.maps.LatLngBounds（）；
地点。forEach（功能（地点）{
如果（！place.geometry）{
log（“返回的位置不包含几何图形”）；
返回；
}
变量图标={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
markers.push（新的google.maps.Marker）({
地图：地图，
图标：图标，
标题：place.name，
位置：place.geometry.location
}));
if（place.geometry.viewport）{
//只有地理代码具有视口。
联合（place.geometry.viewport）；
}否则{
扩展（place.geometry.location）；
}
});
映射边界（bounds）；
});
poly=新的google.maps.Polygon({
strokeColor:“#f32222”，
频闪不透明度：1，
冲程重量：3，
是的，
地图：地图
});
google.maps.event.addListener（poly.getPath（），'insert_at'，calcArea）；
google.maps.event.addListener（poly.getPath（），'set_at'，calcArea）；
//为单击事件添加侦听器
google.maps.event.addListener（映射，'click'，函数（事件）{
addLatLngToPoly（event.latLng，poly）；
});
document.getElementById（“clearPoly”）.onclick=function（）{
面积=0；
document.getElementById（“areaValue”）.value=area；
poly.setPath（[]）；
path=poly.getPath（）；
google.maps.event.addListener（poly.getPath（），'insert_at'，calcArea）；
google.maps.event.addListener（poly.getPath（），'set_at'，calcArea）；
}
}
功能添加LatlngTopoloy（latLng，poly）{
var path=poly.getPath（）；
//因为path是一个MVCArray，所以我们可以简单地附加一个新的坐标
//它会自动出现
路径推（latLng）；
钙质（）；
}
函数calcArea（）{
var path=poly.getPath（）；
area=google.maps.geometry.sphereal.computeArea（路径）；
面积=（Math.trunc（面积））；
document.getElementById（“areaValue”）.value=area；
}

#地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

面积：

m

清楚的

poly = new google.maps.Polygon({
  strokeColor: '#f32222',
  strokeOpacity: 1,
  strokeWeight: 3,
  editable: true,
  map: map
});
google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);

function calcArea() {
  var path = poly.getPath();
  area = google.maps.geometry.spherical.computeArea(path);
  area = (Math.trunc(area));
  document.getElementById("areaValue").value = area;
}

document.getElementById("clearPoly").onclick = function() {
  area = 0;
  document.getElementById("areaValue").value = area;
  poly.setPath([]);
  path = poly.getPath();
  google.maps.event.addListener(poly.getPath(), 'insert_at', calcArea);
  google.maps.event.addListener(poly.getPath(), 'set_at', calcArea);
}