高德地图绘制一个多边形(react)

最新推荐文章于 2025-05-12 19:54:55 发布

芒果沙冰哟

最新推荐文章于 2025-05-12 19:54:55 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_61476911/article/details/129562052

该文章展示了如何在React应用中集成高德地图2.0API，创建并编辑多边形。通过初始化地图、设置编辑器以及处理开始和结束编辑的事件，可以获取编辑后的坐标点列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步先引入一个地图,依旧是以成都地图为例:

仔细看高德地图2.0 api是有完整示例的,但是是纯原生写的,在react中使用就有点不会用了:

最后实现效果图,点击开始编辑并结束编辑就可以获得最终的坐标点:

看一下最后实现代码:

const { AMap } = window;

function mapPark(props) {

//设置地图

const [myMap, setMyMap] = useState(null);

//坐标点列表

const [pointList,setPointList]=useState([])

//初始化地图

const createMap = () => {

const map = new AMap.Map("container", {

zoom: 11, //级别

center: [104.065735, 30.659462], //中心点坐标

});

setMyMap(map);

};

const polyEditor = new AMap.PolygonEditor(myMap);

//开始编辑

const editClick = () => {

polyEditor.open();

};

//结束编辑

const clickHandler = () => {

polyEditor.close();

const list = polyEditor

.getTarget()

.getPath()

.map((item, idx) => {

return [item.KL, item.kT];

});

console.log(list, "获取的坐标点");

setPointList(list)

};

useEffect(function () {

createMap();

}, []);

return (

<div className={styled["industrial-container"]}>

<div>

<div className={styled["enterprise-park-detail"]}></div>

<div style={{ position: "relative", marginTop: "20px" }}>

<div className={styled["enterprise-park-map"]} id="container"></div>

<div className={styled["enterprise-park-card"]}>

<Button type="primary" ghost onClick={() => editClick()}>

开始编辑

</Button>

<Button type="primary" ghost onClick={() => clickHandler()}>

结束编辑

</Button>

</div>

</div>

</div>

</div>

);

}

最后一个小功能就实现了!