[英]how to use containsLocation in react-google-maps/api library
I use the react-google-maps/api
for maps in React.我将
react-google-maps/api
用于 React 中的地图。 I have a polygon on my map and I want to check on each click event if the click happened inside or outside the polygon.我的 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>
);
}
Based on the docs there is a function google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)
that I can use, so in my case in the handleClick function it would look similar to this: containsLocation(event.latLng, paths)
.根据文档,有一个我可以使用的 function
google.maps.geometry.poly.containsLocation(e.latLng, bermudaTriangle)
,所以在我的情况下,在 handleClick function 看起来类似于此: containsLocation(event.latLng, paths)
。
However, I don't know how to call this function, @react-google-maps/api
doesn't export geometry
or poly
.但是,我不知道如何调用此 function,
@react-google-maps/api
不导出geometry
或poly
。 Here is the doc.这是文档。
How do I use this function?我该如何使用这个 function?
Thanks to @MrUpsidown !感谢@MrUpsidown!
I added the geometry library to LoadScript, then it's in the window:我将几何库添加到 LoadScript,然后它在 window 中:
<LoadScript
id="script-loader"
googleMapsApiKey="MY_API_KEY"
language="en"
region="us"
libraries={["geometry"]}
>
console.log(window.PolyGeometry);
{containsLocation: ƒ, isLocationOnEdge: ƒ}
{包含位置:ƒ,isLocationOnEdge:ƒ}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.