javascript - 您如何在 Google map 上的多边形坐标内进行搜索？

Question

我已经实现了react-google-maps与 <Drawing Manager /> .

不确定如何使用它从 onPolylineComplete 返回的对象尽管。似乎也没有记录。我想检查该区域中出现的其他一些位置 - 如果它们出现，我可以填充标记。

所以流程是:

1. 用户应该在一个区域(例如伦敦芬斯伯里广场)周围画一条线。
2. 调用 fetchNewsUpdateMarkers()
3. 调用 API 的对象，每个对象都有 lat 和 lng 值。3.5 我通过它们映射，它们的 lat-lng 值被转换为 google LatLng对象和...
4. 我跑 containsLocation()并返回 true那些给markers数组。

所以这一切都避免了从我的 onPolylineComplete 中获取多边形面积坐标数组返回对象😕

代码:

<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演示了如何突出显示包含在绘制的多边形内的标记