Vue3使用高德地图apijs添加省市区(镇)行政边界

在Vue 3中，要使用高德地图API添加省市区(镇)治安边界，你需要按照以下步骤操作：

1. 确保已经在你的项目中引入了高德地图JavaScript API。
2. 创建一个Vue组件，并在组件的mounted钩子中初始化地图，并添加省市区(镇)治安边界。

以下是一个简单的示例代码：

<template>
  <div id="map" style="width: 100%; height: 400px;"></div>
</template>
 
<script>
export default {
  name: 'MapComponent',
  mounted() {
    // 高德地图API的key需要你自己的
    const key = '你的高德地图API Key';
    const url = `https://webapi.amap.com/maps?v=1.4.15&key=${key}&callback`;
 
    // 动态创建script标签加载高德地图API
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', url);
    script.onerror = () => console.error('高德地图API加载失败');
    document.head.appendChild(script);
 
    // 等待高德地图API加载完成后，初始化地图并添加省市区(镇)治安边界
    window['initAMap'] = () => {
      const map = new AMap.Map('map', {
        zoom: 10,
        center: [116.397428, 39.90923], // 初始化地图中心点
      });
 
      // 这里需要你提供获取省市区(镇)治安边界的数据接口
      fetch('你的数据接口URL')
        .then(response => response.json())
        .then(data => {
          // 假设数据是GeoJSON格式
          new AMap.GeoJSON({
            geoJSON: data,
            map: map,
            // 样式设置
            style: function(feature) {
              // 这里可以根据不同的数据属性设置不同的样式
              return {
                color: 'red',
                opacity: 0.8,
                weight: 2,
              };
            },
          });
        })
        .catch(error => console.error('获取数据失败', error));
    };
  }
};
</script>

在这个示例中，我们首先在mounted钩子中动态加载高德地图API。加载完成后，我们定义了一个initAMap函数来初始化地图，并且使用fetch获取省市区(镇)治安边界的数据，然后使用AMap.GeoJSON类将数据添加到地图上。

请注意，你需要替换key、数据接口URL以及中心点坐标为你自己的信息。此外，样式设置部分需要根据实际的数据和需求进行调整。