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

Question

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

用户绘制的形状：

我打算在用户完成绘制形状后立即添加的功能：

我正在使用 Google 地图的绘图库，如下所示： https://developers.google.com/maps/documentation/javascript/examples/drawing-tools

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

    // 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?
    });

如果有任何其他方法可以在 Google 地图上执行此操作，也请告诉我。

Answer 1

感谢@MrUpsidown 的建议，我能够使用 google.maps.geometry.spherical 命名空间中的 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
  })
})

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

How to copy and scale a Shape using the Google Maps Javascript API drawing library?

javascript

google-maps

google-maps-drawing