vue高德地图画多边形

在Vue中使用高德地图API画多边形需要进行以下步骤：

1. 在index.html中引入高德地图API的js文件：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script>

2. 在Vue组件中使用高德地图API的AMap对象创建地图实例：

mounted() {
  // 创建地图实例
  this.map = new AMap.Map('mapContainer', {
    zoom: 13, // 地图缩放级别
    center: [116.397428, 39.90923], // 地图中心点坐标
  });
}

3. 在地图上绘制多边形：

drawPolygon() {
  // 创建多边形路径
  const path = [
    [116.403322, 39.920255],
    [116.410703, 39.897555],
    [116.402292, 39.892353],
    [116.389846, 39.891365],
    [116.393699, 39.90684],
  ];
  // 创建多边形实例
  const polygon = new AMap.Polygon({
    path: path,
    strokeColor: '#FF33FF',
    strokeWeight: 6,
    strokeOpacity: 0.2,
    fillColor: '#1791fc',
    fillOpacity: 0.4,
  });
  // 添加多边形到地图
  this.map.add(polygon);
}

4. 在Vue组件中调用drawPolygon方法，即可在地图上绘制多边形。

完整代码示例：

<template>
  <div id="mapContainer" style="height: 500px;"></div>
  <button @click="drawPolygon">绘制多边形</button>
</template>

<script>
export default {
  mounted() {
    // 创建地图实例
    this.map = new AMap.Map('mapContainer', {
      zoom: 13, // 地图缩放级别
      center: [116.397428, 39.90923], // 地图中心点坐标
    });
  },
  methods: {
    drawPolygon() {
      // 创建多边形路径
      const path = [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365],
        [116.393699, 39.90684],
      ];
      // 创建多边形实例
      const polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#FF33FF',
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
      });
      // 添加多边形到地图
      this.map.add(polygon);
    },
  },
};
</script>