高德地图多边形地图的设置

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

閉丄眼聆厛倖輻

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

阅读量980

点赞数

CC 4.0 BY-SA版权

分类专栏：高德地图API 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/119875275

这篇博客主要介绍了在Vue项目中如何利用高德地图API进行多边形的绘制，包括如何获取地图坐标并转化为数组进行渲染。

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

首先是绘制多边形,确定可以获得点坐标

首先是获取地图,渲染在页面上:

  initMap() {
      setTimeout(() => {
        this.map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          zoom: 13,
        });
        this.polyEditorEdit = new AMap.PolygonEditor(this.map);
        let toolBar = new AMap.ToolBar({
          position: {
            left: "10px",
            top: "15px",
          },
        });
        toolBar.addTo(this.map);
        // 渲染多边形
        // this.polygons = [];
        // this.region.forEach((element) => {
        //   let polygon = new AMap.Polygon({
        //     path: element.lnglat,
        //   });
        //   this.polygons.push(polygon);
        // });
        // this.map.add(this.polygons);
        // this.map.setFitView();
      }, 500);

在view层: