如何在 react-google-maps/api 库中使用 containsLocation

Question

我在 React 中使用 react-google-maps/api 映射。我的地图上有一个多边形，如果点击发生在多边形内部或外部，我想检查每个点击事件。

import React from "react";
import { LoadScript, GoogleMap, Polygon } from "@react-google-maps/api";

export default function App() {
  const paths = [
        { lat: 52.52549080781086, lng: 13.398118538856465 },
        { lat: 52.48578559055679, lng: 13.36653284549709 },
        { lat: 52.48871246221608, lng: 13.44618372440334 },
        { lat: 52.52549080781086, lng: 13.398118538856465 }
  ];
  const handleClick = (event) => {
        console.log(event.latLng);
  };
  return (
        <div className="App">
          <LoadScript
              id="script-loader"
              googleMapsApiKey="MY_API_KEY"
              language="en"
              region="us"
          >
            <GoogleMap
              mapContainerClassName="App-map"
              center={{ lat: 52.52047739093263, lng: 13.36653284549709 }}
              zoom={12}
              version="weekly"
              on
              onClick={onClick}
            >
                <Polygon
                   paths={paths}
                   strokeColor={"#FF0000"}
                   strokeOpacity={0.8}
                   strokeWeight={2}
                   fillColor={"#FF0000"}
                   fillOpacity={0.35}
                   draggable={true}
                 />
            </GoogleMap>
          </LoadScript>
        </div>
      );
    }

基于 docs 有一个函数 google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) 我可以使用，所以在我的例子中，在 handleClick 函数中它看起来类似于： containsLocation(event.latLng, paths).

但是，我不知道如何调用这个函数，@react-google-maps/api 不导出 geometry 或 poly。 Here 是文档。

如何使用这个功能？

Answer 1

感谢@MrUpsidown！

我将几何库添加到 LoadScript，然后它在 window:

<LoadScript
      id="script-loader"
      googleMapsApiKey="MY_API_KEY"
      language="en"
      region="us"
      libraries={["geometry"]}
>

console.log(window.PolyGeometry);

{containsLocation: ƒ, isLocationOnEdge: ƒ}

如何在 react-google-maps/api 库中使用 containsLocation

how to use containsLocation in react-google-maps/api library

javascript

google-maps

google-maps-api-3

reactjs