在Vue Cli 3中引入高德地图

最新推荐文章于 2024-08-21 16:17:14 发布

郭宝

最新推荐文章于 2024-08-21 16:17:14 发布

阅读量2.6k

点赞数 3

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_35366269/article/details/102505480

版权

Web前端专栏收录该内容

276 篇文章 105 订阅 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

这篇博客介绍了在Vue Cli 3中两种引入高德地图的方法：一是通过vue-amap插件，包括申请KEY、安装、全局引入及组件创建；二是推荐的直接使用高德SDK，涉及申请KEY、添加API脚本、创建Vue组件。详细步骤和效果图供参考。

摘要由CSDN通过智能技术生成

方式一：

说明：

通过安装vue-amap 插件的方式来引入

步骤：

1、去高德开放平台中申请一个KEY

2、安装vue-amap 插件

npm install vue-amap --save

3、全局引入vue-amap插件

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'a619e113c7917b69b1efa4f22f31d286',
  // 插件集合
  plugin: ['AMap.Autocomplete','AMap.PlaceSearch','AMap.Scale','AMap.OverView','AMap.ToolBar','AMap.MapType','AMap.PolyEdit

了解本专栏