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

Question

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

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

所以流程是：

用户应该在一个区域周围画一条线（例如，伦敦芬斯伯里广场。）
这调用 fetchNewsUpdateMarkers()
调用 API 个对象，每个对象都有 lat 和 lng 值。 3.5 我通过它们映射，它们的 lat-lng 值被转换为 google LatLng 对象和...
我运行 containsLocation() 和 return true 到 markers 数组。

所以这一切都是为了从我的 onPolylineComplete returned 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 returns 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 演示了如何突出显示包含在绘制的多边形内的标记

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

How do you search within a Polygon's coordinates on Google Maps?

javascript

google-maps

reactjs

react-google-maps