您如何在Google地图上的多边形坐标内搜索？

Question

我已经用react-google-maps实现了<Drawing Manager />。

虽然不确定如何使用它从onPolylineComplete返回的对象。似乎也没有记录在案。我想检查一下该区域中是否还有其他位置-如果有的话，我可以填充标记。

所以流程是：

1. 用户应在区域（例如伦敦的Finsbury Circus）周围画一条线。
2. 这叫fetchNewsUpdateMarkers()
3. 调用对象的API，每个对象都有 lat 和 lng 值。 3.5我通过它们映射，它们的 lat-lng 值被转换为google LatLng对象和...
4. 我运行containsLocation()，然后将true个返回markers数组。

因此，从我的onPolylineComplete返回的obj获取多边形区域坐标数组时，这一切都是套期保值的

代码：

<DrawingManager
  defaultOptions={{
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE,
      ],
    },
  }}
  onPolylineComplete={(obj) => props.fetchNewsUpdateMarkers(obj)};
/>

然后...

fetchNewsUpdateMarkers: (obj) => {
  console.log(obj); // <-- this logs out as below
  let markers = [];
  let searchArea = new google.maps.Polygon({ paths: polygonCoords }); // <--that I hope to get from 'obj' somehow!

  let arrayOfAPIlocations = [
    { lat: 51.518420, lng: -0.088690 },
    { lat: 51.518110, lng: -0.087970 },
    { lat: 51.517601, lng: -0.180250 }
  ];

// ^^ only the *last* obj in this array is West London.
// The others are in the same district of East London.

// So maybe something like:

  arrayOfAPIlocations.map(each => {
    let convertedLatLng = new google.maps.LatLng(each.lat, each.lng);
    if (google.maps.geometry.poly.containsLocation(convertedLatLng, searchArea)) {
      markers.push(each);
    }
    return markers;
  });
} 

这是'obj'的当前结果：

Answer 1

onOverlayComplete事件具有以下签名：

onOverlayComplete?(e: google.maps.drawing.OverlayCompleteEvent): void

当用户完成绘制多边形后，OverlayCompleteEvent.overlay property返回Polygon对象的实例，以下代码片段演示了如何确定给定点是否位于指定的多边形内：

handleOverlayComplete(e) {

    const polygon = e.overlay;
    const latLng = new google.maps.LatLng(lat, lng);
    const containsPlace = google.maps.geometry.poly.containsLocation(
        latLng,
        polygon
    );
    //...
}

或者可以使用onPolygonComplete event：

onPolygonComplete?(p: google.maps.Polygon): void

This demo演示了如果标记包含在绘制的多边形中，则如何突出显示标记