如何使用Google Maps Javascript API绘图库复制和缩放形状？

我正在我的React应用程序中创建一个Google地图，我希望用户能够绘制形状，另外一个功能是，一旦用户完成绘制形状，必须将另一个形状作为轮廓添加到其中，如下图所示：

用户绘制的形状：

我的目标是在用户完成图形绘制后立即添加功能：

我正在使用谷歌地图的绘图库，如下所示：

以下是我正在使用的相关代码：

    // When a circle is drawn
    google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
      let tempCirc = new google.maps.Circle({ 
        radius: circle.getRadius()*2, 
        center: circle.getCenter(),
        editable: true,
        map: map
      })
    });

   // When a rectangle is drawn
   google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rect) {
      let tempRect = new google.maps.Rectangle({
          strokeColor: '#FF0000',
          strokeOpacity: 0.8,
          strokeWeight: 2,
          fillColor: '#FF0000',
          fillOpacity: 0.35,
          map: map,
          editable: true,
          draggable: true
        })

      rectangle.setBounds(
        new google.maps.LatLngBounds(
          new google.maps.LatLng(
            rect.getBounds().getSouthWest().lat() - .005, 
            rect.getBounds().getSouthWest().lng() - .005*2
          ),
          new google.maps.LatLng(
            rect.getBounds().getNorthEast().lat() + .005, 
            rect.getBounds().getNorthEast().lng() + .005*2
          ),
        )
      )
    });

    // When a polygon is drawn
    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
      // What can I do here?
    });

---

如果在谷歌地图上还有其他方法可以这样做，请也告诉我。

多亏@MrUpsidown的建议，我能够使用

Google.maps.geometry.sphereal

命名空间中的

interpolate（）

方法

通过提供大于1的分数，我能够得到形成外部多边形的点。该方法适用于没有孔的简单多边形。希望它能帮助别人

// getCenter() for Polygon
google.maps.Polygon.prototype.getCenter = function(){
  var arr = this.getPath().getArray()
  , distX = 0, distY = 0
  , len = arr.length

  arr.forEach(function (element, index) { 
    distX+= element.lat()
    distY+= element.lng()
  });

  return new google.maps.LatLng(distX/len, distY/len);
}

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(poly) {
  let polyCenter = poly.getCenter()
  , innerShapePoints = poly.getPath().getArray()
  , outerShapePoints = []

  outerShapePoints = innerShapePoints.map(point => {
    return google.maps.geometry.spherical.interpolate(polyCenter, point, 1.5)
  })

  let outerPolygon = new google.maps.Polygon({
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35,
    map: map,
    editable: true,
    suppressUndo: true,
    draggable: true,
    path: outerShapePoints
  })
})

---

还有别的办法吗？你试过什么方法？@Upsidown添加了一些我试过的代码。这听起来像是一项艰巨的任务。对于像您的图像所示的简单多边形可能是可行的。但是，对于复杂的多边形，如交叉点、孔洞等呢？感谢您的关注。在我的使用案例中，即使是一个简单多边形的方向上的任何引线都足够了。这不会阻止用户绘制另一个形状，并且会产生意想不到的结果。。。也就是说，我还没有任何现成的解决方案，即使是一个简单的多边形。