您如何在 Google 地圖上的多邊形坐標內進行搜索？

Question

我已經使用<Drawing Manager />實現了react-google-maps 。

不確定如何使用它從onPolylineComplete返回的對象。 似乎也沒有記錄。 我想檢查該區域中出現的其他一些位置 - 如果有，我可以填充標記。

所以流程是：

1. 用戶應該在一個區域周圍畫一條線（例如倫敦芬斯伯里馬戲團）。
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屬性返回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事件：

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

此演示演示如何突出顯示包含在繪制多邊形內的標記