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

Question

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

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>
      );
    } 

根据文档，有一个我可以使用的 function google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle) ，所以在我的情况下，在 handleClick function 看起来类似于此： containsLocation(event.latLng, paths) 。

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

我该如何使用这个 function？

Answer 1

感谢@MrUpsidown！

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

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

console.log(window.PolyGeometry);

{包含位置：ƒ，isLocationOnEdge：ƒ}