十分钟玩转 vue3+高德地图AMap+geojson批量绘制Polygon地块数据展示【一、基础引入配置】
最近做项目的时候，由于最近天地图卡的起飞，无奈之下只好改用高德，虽然高德地图文档比较完善，但是多少还是有点坑。
建议慢慢食用，能把这篇文章的研究好了，足以轻松在 vue3 中使用高德地图的各种API功能。
此文章内容适用ts，使用js的同学请自行举一反三改造代码。
文内付全代码，供大家学习研究！
最终效果如图所示
vue3的安装我就跳过了。
一、开发准备
首先，注册开发者账号，成为高德开放平台开发者
登陆之后，在进入「应用管理」 页面「创建新应用」
为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。
添加成功后，获取到 Key 值。
如需要使用某些特定接口，需要用上安全密钥（例如：坐标转换函数）。
二、地图组件开发和使用
1.按 NPM 方式安装使用 Loader ：
npm i @amap/amap-jsapi-loader --save
三、他组件安装使用
1.安装axios 和 element
# axiosnpm install axios --save#vue-axiosnpm install vue-axios --save#vue element-plusnpm install element-plus --save
2.在main.js引入相关组件以及地图基础调用
main.js 代码
import {createApp } from 'vue'import './style.css'import App from './App.vue'import axios from 'axios';import VueAxios from 'vue-axios'// createApp(App).use(axios)import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'createApp(App).use(VueAxios,axios,ElementPlus).mount('#app')
index.html 代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- <script type="text/javascript" src="/maps?v=1.4.4&key=3e4741f5c35ad618981aac48f79231b5"></script> --><title>Vite + Vue</title><script type="text/javascript">// 高德地图秘钥，必须在加载JSAPI load.js文件之前// 此写法在开发环境中使用，生产环境中建议不要将密钥暴露出来window._AMapSecurityConfig = {securityJsCode: "你的密钥" }</script></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body></html>
3.在components 中新建一个 map.vue 文件用作组件
4.在App.vue 文件中引入 map.vue 组件
App.vue 代码
<script setup>// This starter template is using Vue 3 <script setup> SFCs// Check out /api/sfc-script-setup.html#script-setupimport HelloWorld from './components/HelloWorld.vue'import Map from './components/map.vue'</script><template><Map /></template><style scoped></style>
5.因为默认的样式不是布满横屏的，所以我们需要改造一下 vue 默认的CSS文件 ，打开style.css 修改以下样式
style.css
#app {width: 100%;/* max-width: 1280px; *//* max-width: 100%; *//* margin: 0 auto; *//* padding: 2rem; *//* text-align: center;padding: 0; */}
至此我们的基础配置已经完成。
下一节，会在map.vue组件上进行开发讲解。
