几年没碰前端，Vue集成高德地图，是不是太多导致耗时？

几年没碰前端，Vue集成高德地图，是不是太多导致耗时？

几年没碰过前端， 最近闲来无事在捣鼓一个小项目，项目中一个功能涉及到地图组件，没想到在集成高德地图时遇到好几个问题，耗时3小时到头来攻克，遂特此记录。如果有跟我同样情况的，希望可以帮助到你。

高德地图作为国内领先的地图服务提供商， 提供了强大的 API 接口，方便开发者在应用中集成地图功能。集成地图是为了实现一个功能：用户可以点击地图设置门店地址， 靠谱。 并提供给后端省、市、区、详细地址、行政编码、经纬度等信息，这样前端可以减少设置地址的操作步骤。 这对于提高用户体验和简化流程非常重要。

第一步：安装 Vue-AMap 组件

当冤大头了。 先说说需要安装 vue-amap 组件。这是一个基于 Vue 2.x 和高德地图的组件库，提供了方便的 API 来使用高德地图的功能。

bash npm install vue-amap --save

第二步：配置外部引用

从一个旁观者的角度看... 为了避免增加包体积和提高加载速度，建议将高德地图 SDK 作为外部引用引入。修改 webpack.base.conf.js 文件中的 externals 配置：

javascript externals: 我可是吃过亏的。 { 'AMap': 'AMap' },

第三步：初始化 AMap API Loader

在 main.js 或其他入口文件中初始化 AMap API Loader, 确保高德 API 在页面加载完成后才能正常使用。

javascript //引入高德地图import VueAMap from'vue-amap'Vue.useVueAMap.initAMapApiLoader智能体编程....文章浏览阅读8.3k次,点赞13次,收藏46次。