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

*前期准备

注册账号并申请Key

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

第二步

创建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>

查看成果

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

开发 | 高德地图API

:: 更多内容 ::

> 开发过程中踩坑经验记录