如何在 vue 项目中引入高德地图

---

前言

相信在 web 开发中有不少项目都用到过地图，那么我们怎么在自己的项目中引入第三方地图呢？

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、申请 地图api开发者key

这里以高德地图为例
1、到 高德地图开发平台 注册账号申请一个key

应用创建成功就可以看到自己的key和密钥了

二、在vue项目安装高德地图的包

npm安装包

npm i @amap/amap-jsapi-loader --save

具体操作看在vue中使用高德地图

三、使用

1、在自己的组件中引入高德地图类

代码如下（示例）：

import AMapLoader from '@amap/amap-jsapi-loader'

2、编写初始化函数

具体配置可以参考官方文档

initMap(){
    AMapLoader.load({
      key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
      version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
      this.map = new AMap.Map("container",{  //设置地图容器id
        viewMode:"3D",    //是否为3D地图模式
        zoom:5,           //初始化地图级别
        center:[105.602725,37.076636], //初始化地图中心点位置
      });
    }).catch(e=>{
      console.log(e);
    })
  },

在 monted 中调用初始化函数

3.添加插件

这里的插件就好比vue里面页面中的主键一样，这个插件就像是地图的组件 如比例尺等等
1、同步加载插件

//在初始化函数中有一个plugins的配置给他穿入插件的名字即可
//如
 plugins: ['AMap.ToolBar','AMap.Scale', 'AMap.HawkEye','AMap.MapType','AMap.Geolocation','AMap.AutoComplete','AMap.PlaceSearch']

1.2、实例化你所添加的插件到地图中

//使用 map实例中的 addControl()方法添加到地图中
 this.map.addControl(new AMap.Scale()) //这里的AMap.Scale就是上述在plugins中添加的插件名

更多插件可以查看插件的使用

2异步添加插件

//AMap.plugin的第一个参数使用数组即可同时加载引入多个插件。
AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
  var toolbar = new AMap.ToolBar();
  map.addControl(toolbar);
  var driving = new AMap.Driving();//驾车路线规划
  driving.search(/*参数*/)
});

---