Javascript Google Maps JS API v3-如何检查和显示多边形点之间的距离

我使用谷歌地图API允许用户在地图上绘制自定义多边形。我需要检查并显示每个边框的长度

我已经使用几何体库和地图标签库来获取和显示多边形的计算面积（在“insert_at”和“set_at”事件中也会发生更改），但不幸的是，我不知道如何获取边界长度。任何帮助都将不胜感激

使用的代码示例：

var labels = [];
var allOverlays = [];

function setSelection(shape) {
  selectedShape = shape;
  shape.setEditable(true);
}

function initMap() {

 var options = {
    zoom: 14,
    center: {lat: 52.250618, lng: 20.9774}
}

var map = new google.maps.Map(document.getElementById('map'), options);

var drawingManager = new google.maps.drawing.DrawingManager({
 markerOption: {
 draggable: false
 },
 polygonOptions: {
 draggable: false,
 fillColor: '#5C6BC0',
 fillOpacity: 0.45,
 strokeWeight: 0,
 editable: true,
 zIndex: 1
 },
 drawingControl: true,
 drawingControlOptions: {
 position: google.maps.ControlPosition.TOP_CENTER,
 drawingModes: ['circle', 'polygon']
 },
 circleOptions: {
 fillColor: '#5C6BC0',
 fillOpacity: 0.45,
 strokeWeight: 0,
 editable: true,
 zIndex: 1
 },
 map: map
});

function attachPolygonInfoWindow(polygon) {
   var path = polygon.getPath();
   var points = path.getArray();
   var area = (google.maps.geometry.spherical.computeArea(path.getArray())).toFixed(0);
   var bounds = new google.maps.LatLngBounds();
   var i;

   for (i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
   }

   var boundsCenter = bounds.getCenter();
   var mapLabel = new MapLabel({
      map: map,
      fontSize: 20,
      align: 'left'
   });

   if (!labels.length) {
      labels.push(mapLabel)
   }

   showPolygonInfoWindow(labels, boundsCenter, area);
}

function showPolygonInfoWindow(arr, position, text) {
   arr.forEach((el) => {
     el.set('position', position);
     el.set('text', text + 'm2')
   })
}

function removePolygonInfoWindow() {

   for (var i = 0; i < labels.length; i++) {
     labels[i].setMap(null);
   }

   labels = [];
}

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
   allOverlays.push(e);

   if (e.type != google.maps.drawing.OverlayType.MARKER) {

   drawingManager.setDrawingMode(null);

   var newShape = e.overlay;
   newShape.type = e.type;

   google.maps.event.addListener(newShape, 'click', function() {
       setSelection(newShape);
   });


   if (newShape.type == "polygon") {
     var path = newShape.getPath();

     google.maps.event.addListener(path, 'insert_at', function() {
        attachPolygonInfoWindow(newShape);
     });

     google.maps.event.addListener(path, 'set_at', function() {
        attachPolygonInfoWindow(newShape);
     });

     attachPolygonInfoWindow(newShape);
   }

   setSelection(newShape);
  }
});
}

initMap();

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=drawing,geometry">
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/js-map-label/gh-pages/src/maplabel.js"></script>

var标签=[]；
var allOverlays=[]；
功能选择（形状）{
selectedShape=形状；
shape.setEditable（true）；
}
函数initMap（）{
变量选项={
缩放：14，
中心：{lat:52.250618，lng:20.9774}
}
var map=new google.maps.map（document.getElementById（'map'），options）；
var drawingManager=new google.maps.drawing.drawingManager({
标记选项：{
可拖动：错误
},
多克隆选择：{
可拖动：错误，
填充颜色：“#5C6BC0”，
填充不透明度：0.45，
冲程重量：0，
是的，
zIndex:1
},
drawingControl：对，
drawingControlOptions：{
位置：google.maps.ControlPosition.TOP_CENTER，
绘图模式：[“圆”、“多边形”]
},
循环操作：{
填充颜色：“#5C6BC0”，
填充不透明度：0.45，
冲程重量：0，
是的，
zIndex:1
},
地图：地图
});
函数AttachPolygonInfo窗口（多边形）{
var path=polygon.getPath（）；
var points=path.getArray（）；
var area=（google.maps.geometry.sphereal.computeArea（path.getArray（））.toFixed（0）；
var bounds=new google.maps.LatLngBounds（）；
var i；
对于（i=0；i{
el.set（“位置”，位置）；
标高集（'text'，text+'m2'）
})
}
函数removePolygonInfoWindow（）{
对于（变量i=0；i

---

我想在每个边框的侧面显示每个边框的长度。

我的建议是，在创建中心标签时，还要处理多边形的路径，计算它们的长度和中心；然后为每个对象创建

MapLabel

对象，并将其放置在侧面的中心。比如：

for (var i=0; i<polygon.getPath().getLength(); i++) {
  // for each side in path, compute center and length
  var start = polygon.getPath().getAt(i);
  var end = polygon.getPath().getAt(i<polygon.getPath().getLength()-1 ? i+1 : 0);
  var sideLength = google.maps.geometry.spherical.computeDistanceBetween(start,end);
  var sideCenter = google.maps.geometry.spherical.interpolate(start, end, 0.5);
  var sideLabel = new MapLabel({
    map: map,
    fontSize: 20,
    align: "center"
  });
  sideLabel.set("position", sideCenter);
  sideLabel.set("text", sideLength.toFixed(2)+"m");
  polygon.labels.push(sideLabel);
}