如何解决如何返回所选多边形的坐标?
我正在使用google-maps-react
来绘制一个在地图上具有多个多边形的数组。
当我单击一个多边形时,我希望它返回该选定多边形的所有坐标。你能告诉我我该怎么做吗?
以下是我如何在地图上绘制坐标的图片:
如果要在悬停在每个多边形上时添加一个hover
事件,我也想做些其他的事情。就像我在互联网上找到的这段视频一样:https://recordit.co/MciFGBL3b7
这是我在codesandbox上输入的代码:https://codesandbox.io/s/blissful-herschel-25rsl?file=/src/App.js
谢谢。
解决方法
我看到您将 data.coordinates
json 简化为 auxCoords
。您可以做的是将其推入一个数组,然后使用该数组将这些路径从 auxCoords 映射到 <Polygon/>
。我是这样实现的:
- 将缩减后的 json 数据推送到数组中
import data from "./data.json";
const dataArray = [];
let auxCoords = {
auxCoords: data.coordinates.reduce(
(a,[c]) => a.concat([c.map(([lat,lng]) => ({ lat,lng }))]),[]
)
};
dataArray.push(auxCoords.auxCoords[0]);
- 在
<Map/>
中,您会看到我将<Polygon/>
括在{auxCoords.auxCoords.map((poly,key) => ()}
中。这是从 auxCoords 映射每个多边形路径数组。在这种情况下,它会单独创建一个<Polygon/>
对象,您可以访问每个形状的路径和属性。另外,请注意onClick,onMouseover and onMouseout parameters
google-maps-react`](https://www.npmjs.com/package/google-maps-react#events-2) 中的<Polygon/>. Luckily,these events are supported by [
。
return (
<div>
<Map
className="map"
google={this.props.google}
onClick={this.onMapClicked}
initialCenter={{
lat: -47.7027099655629,lng: -22.26485424139211
}}
style={{ height: "100%",position: "relative",width: "100%" }}
zoom={14}
>
{auxCoords.auxCoords.map((poly,key) => (
<Polygon
key={key}
paths={poly}
strokeColor="#0000FF"
strokeOpacity={0.8}
strokeWeight={2}
fillColor="#0000FF"
fillOpacity={0.35}
onClick={this.onPolyClick}
onMouseover={this.onPolyHover}
onMouseout={this.onPolyHoverOut}
/>
))}
</Map>
</div>
);
- 下面是我在上述事件中调用的函数。在 onClick 中,我使用道具获取路径。在 onPolyHover 中,我使用
polygon
方法从getPaths
获取路径,然后使用setOptions
在您将鼠标悬停在单个多边形上时更改 fillColor。在 onPolyHoverOut 中,我将 fillColor 改回原来的 fillColor。
onPolyClick = (props,polygon,e) => {
console.log("onclick:");
console.log(props.paths);
};
onPolyHover = (props,e) => {
console.log("onHover:");
console.log(polygon.getPaths());
polygon.setOptions({ fillColor: "#ff00ff" });
};
onPolyHoverOut = (props,e) => {
console.log("onHover:");
polygon.setOptions({ fillColor: "#0000FF" });
};
请参阅此 working code。 注意:使用您的 API 密钥使代码正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。