vue cli项目中简单引入高德地图【亲测实用，可供参考】

拼搏现实的明天。 2022-12-19 14:25 112阅读 0赞

#### \*前期准备 ####

> ###### 注册账号并申请Key ######
> 
> 1.  首先，[注册开发者账号][Link 1]，成为高德开放平台开发者
> 2.  登陆之后，在进入「应用管理」 页面「创建新应用」
> 3.  为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

#### 第一步 ####

###### 使用`npm`包管理工具下载 `loader`（下载速度慢） ######

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

推荐使用`cnpm`下载，下载速度会快一些，若您在这之前没有安装`cnpm`，可以现在安装上，此后需要下载其它东西都可以使用了，提高下载速度

###### 安装`cnpm` ######

`npm i cnpm -g`

*  i 即 install
 *  \-g 即 global ，就是安装到全局的意思，成功安装之后，在整台电脑设备上都可以使用

###### 使用`cnpm`安装`loader`（下载速度快） ######

`cnpm i @amap/amap-jsapi-loader --save`

![在这里插入图片描述][20201108142755996.png_pic_center]

#### 第二步 ####

###### 创建map容器 ######

`<div id="container" style="height:777px;width:100%;" ></div>`

#### 第三步 ####

###### 引入loader ######

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

#### 第四步 ####

###### 加载 ######

*  这里的代码也可以根据实际情况封装在函数当中使用
 *  在data中创建一个map用于接收new出来的Map实例

AMapLoader.load({
      "key": "这里填上你的key",  // 申请好的Web端开发者Key
      "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // 次数省略若干参数信息，详情请移步官网 https://lbs.amap.com/api/jsapi-v2/guide/abc/load
    }).then((AMap)=>{
      this.map = new AMap.Map('container');
    }).catch(e => {
      console.log(e);
    })

#### 完整code ####

<template>
      <div id="app">
        
        <div id="container" style="height:777px;width:100%;" ></div>
      </div>
    </template>
    
    <script>
    
    // 引入loader
    import AMapLoader from '@amap/amap-jsapi-loader';
    
    // 加载
    AMapLoader.load({
      "key": "这里填上你的key",  // 申请好的Web端开发者Key
      "version": "1.4.15",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // 此处省略若干参数信息，详情请移步官网 https://lbs.amap.com/api/jsapi-v2/guide/abc/load
    }).then((AMap)=>{
      // 在data中声明的map
      this.map = new AMap.Map('container');
    }).catch(e => {
      console.log(e);
    })
    export default {
      name: 'App',
      data(){
        return {
          map: null // 声明一个空的map
        }
      },
    }
    </script>
    
    <style>
    
    </style>

#### 查看成果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwMjczOA_size_16_color_FFFFFF_t_70_pic_center]  
这里只是简单列举引入高德地图的一种方式，简单粗暴且易懂，更多详细API文档请移步官网

[开发 | 高德地图API][_ _API]

[Link 1]: https://lbs.amap.com/dev/id/choose
[20201108142755996.png_pic_center]: /images/20221120/352178adb3254b48acdf5feb015a4380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwMjczOA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/6669473c89814c348227bba5fdd3ca68.png
[_ _API]: https://lbs.amap.com/api