gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 03:46:23 25 4
gpt4 key购买 nike

我将 react-google-maps/api 用于 React 中的 map 。我的 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>
);
}

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

但是,我不知道如何调用这个函数,@react-google-maps/api 不导出 geometrypolyHere是文档。

如何使用这个功能?

最佳答案

感谢@MrUpsidown!

我将几何库添加到 LoadScript,然后它就在窗口中:

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

console.log(window.PolyGeometry);

{containsLocation: ƒ, isLocationOnEdge: ƒ}

关于javascript - 如何在 react-google-maps/api 库中使用 containsLocation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65317640/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com