vue3高德地图划定区域

### 在 Vue3 中使用高德地图 API 实现地图划区功能

为了在 Vue3 项目中集成高德地图并实现绘制多边形区域的功能，可以按照如下方法操作：

#### 安装依赖库
首先，在项目根目录下通过 npm 或 yarn 安装 `vue-amap` 插件来简化与高德地图交互的过程。

npm install vue-amap --save

或者

yarn add vue-amap

#### 初始化配置
接着，在项目的入口文件 main.js 中注册全局组件，并加载必要的插件和服务。注意替换 `'你的密钥'` 和 `'你的key'` 为你自己的安全码和开发者 key[^1]。

import { createApp } from 'vue';
import App from './App.vue';

// 导入 AMap 组件库
import VueAmap from '@vuemap/vue-amap-taro';

const app = createApp(App);

app.use(VueAmap, {
    // 设置高德地图的安全校验参数
    amapKey: '你的key',
    plugin: ['AMap.PolyEditor', 'AMap.CircleEditor'],
});

window._AMapSecurityConfig = {
    securityJsCode: '你的密钥'
};

app.mount('#app');

#### 创建地图实例
之后，在需要展示地图的页面组件内定义 map 对象以及初始化函数 initMap() 来创建地图容器并设置初始视图中心点坐标等属性。

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

<script setup lang="ts">
import { onMounted } from "vue";

let map;

onMounted(() => {
initMap();
})

function initMap(){
if (typeof AMap === 'undefined') return;
map = new AMap.Map('container', {
center: [105.796824, 37.98115], // 默认地理中心位置
zoom: 5,
});
}
</script>

<style scoped>
#container{
width: 100%;
height: calc(100vh);
}
</style>

#### 添加绘图工具栏
最后一步是向地图添加用于绘制多边形或其他图形的控件。这里可以通过调用 `AMap.DrawingManager` 类来进行自定义化处理，允许用户点击按钮后进入画线模式，完成后再退出编辑状态保存所选范围的数据。

// 增加此部分代码到上面的 script 标签里
import AMapLoader from "@amap/amap-jsapi-loader";
...
async function enableDrawPolygon() {
await AMapLoader.load({
key: "你的key",
version: "2.0",
plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.OverView", "AMap.MapType"],
})
.then((AMap) => {
var drawingTool = new AMap.Drawing({map: map});
drawingTool.open(); // 打开绘画板
drawingTool.draw('polygon'); // 开始绘制多边形
}).catch(e=>console.error(e));
}

// 将该方法绑定至某个事件触发器上，比如按钮click事件
<button @click="enableDrawPolygon">开始划分区域</button>

以上就是在 Vue3 应用程序中利用高德地图 JavaScript API 实现基本的地图划区分割功能的方式。