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

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

原创

最新推荐文章于 2025-05-12 19:54:55 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

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

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

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

  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层: