vue3+高德地图绘制点线面

Vue3 + 高德地图（AMap）结合使用可以创建丰富的地图应用，包括绘制点、线和面。以下是基本步骤：

1. **安装依赖**：
- 首先，在Vue项目中安装高德地图JavaScript API：`npm install amap-js-sdk`

2. **注册并初始化地图**：

   import AMap from 'amap-js-sdk';
   Vue.use(AMap);
   const map = new AMap.Map('container', {
     zoom: 13, // 初始化缩放级别
     center: [116.404, 39.915], // 初始化中心位置
   });

3. **绘制点**：
使用`AMap.Marker`类添加标记：

   const marker = new AMap.Marker({
     position: map.getCenter(), // 设置标记位置
     draggable: true, // 可拖动
   });
   map.addMarker(marker);

4. **绘制线**：
`AMap.Polyline`用于绘制折线：

   const polylineOptions = {
     paths: [[116.404, 39.915], [116.407, 39.918]], // 线路坐标
     strokeColor: '#FF0000', // 颜色
     strokeWeight: 2, // 线宽
   };
   const polyline = new AMap.Polyline(polylineOptions);
   map.addPolyline(polyline);

5. **绘制面**（区域）：
`AMap.Polygon`用于创建填充区域：

   const polygonOptions = {
     coordinates: [[116.404, 39.915], [116.407, 39.918], [116.409, 39.916]], // 区域边界
     fillOpacity: 0.5, // 填充透明度
   };
   const polygon = new AMap.Polygon(polygonOptions);
   map.addPolygon(polygon);