vue 高德地图 绘制图形

Vue.js与高德地图的结合可以通过使用高德地图的JavaScript API来实现。下面是一个简单的示例，演示如何在Vue组件中绘制图形：

首先，确保你已经按照高德地图官方文档的指导，引入了高德地图的JavaScript API。

在你的Vue组件中，可以使用以下代码来初始化地图并绘制图形：

<template>
  <div id="mapContainer"></div>
</template>

<script>
export default {
  mounted() {
    // 初始化地图
    const map = new AMap.Map('mapContainer', {
      zoom: 13, // 缩放级别
      center: [116.397428, 39.90923], // 地图中心点坐标
    });

    // 创建多边形对象
    const polygon = new AMap.Polygon({
      path: [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
      ],
      strokeColor: '#FF33FF', // 线颜色
      strokeWeight: 6, // 线宽
      strokeOpacity: 0.2, // 线透明度
      fillColor: '#1791fc', // 填充颜色
      fillOpacity: 0.4 // 填充透明度
    });

    // 将多边形添加到地图上
    map.add(polygon);
  }
};
</script>

<style>
#mapContainer {
  width: