一、开发准备和前端搭建

1.  首先，注册开发者账号，成为高德开放平台开发者

2.  登陆之后，在进入「应用管理」 页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」，设置域名白名单，可选（建议设置域名白名单）。

4. 添加成功后，可获取到key值。

5.运行安装vue-cli脚手架 首先进入到命令行窗口中,输入以下命令：

npm install vue-cli -g

6. 创建项目 vue create vue-map  其中vue-map为项目目录名称

vue create vue-map 

7.根据提示设置下项目相关内容

8.执行命令开始启动项目了

npm run serve

二、基础工作做好后，下面开始正式的地图组件开发和使用

获取高德地图API，获取方式有多种比如（以常规 JavaScript 脚本的方式加载、官网提供的 JSAPI Loader ）这里为了更好的符合Vue使用推荐使用第二种方式。

1.按 NPM 方式安装使用 Loader ：

npm i @amap/amap-jsapi-loader --save #或
yarn add @amap/amap-jsapi-loader --save

2.在项目src/view 目录下新建MapContainer.vue文件，来用作地图组件。

3.新建的MapContainer.vue 组件中创建地图容器, div标签作为地图容器，同时为该div指定id属性；

<template> <div id="container"></div> </template>

4.设置地图容器样式

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 100%;
    }
</style>

5.在 MapContainer.vue 文件的 script部分直接引入并初始化，引入 amap-jsapi-loader

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

初始化map对象（注意此处声明map对象时vue2和vu3的用法用有区别，且不能混合使用）强烈建议您在使用时按照我们推荐的的用法进行使用。

在Vue2中使用以下方式:

1.在data函数中声明map对象

data(){
      return{
        map:null,
     } 
 },

在Vue3中使用以下方式

1.首先需要引入shallowRef 方法（使用 shallowRef 进行非深度监听，因为在Vue3 所使用的 Proxy 拦截操作会改变JSAPI原生对象，所以此处需要区别Vue2使用方式对地图对象行非深度监听，否则会导致意料之外的问题出现。）

import { shallowRef } from '@vue/reactivity'

 2. 在setup函数中声明map对象

setup(){
  const map = shallowRef(null);
    return{
       map,
    }
},

6.地图初始化函数initMap（）：

methods:{
    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);
        })
    },
},

提示：JSAPI Loader是我们提供的 API 加载器，其加载方式为异步加载JSAPI 内容，所以在使用 AMap对象前需进行验证。这种使用场景下，JSAPI不会阻塞页面其他内容的执行和解析，但是 JSAPI 的脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在AMap对象完整生成之后再调用 JSAPI 的相关接口，否则有可能报错。

7.调用地图初始化函数：mounted是vue中的一个钩子函数，是会在初始化页面完成后，再对dom节点进行相关操作，建议在mounted函数中调用地图初始化方法。

mounted(){
    //DOM初始化完成进行地图初始化
    this.ininMap();
}

8.在完成如上准备工作之后便可以将地图组建嵌入其他组件或view中进行开发使用了，具体使用可参考开发实例。（JSAPI_Vue2开发示例，JSAPI_Vue3开发示例）

高德地图教程地址：地图生命周期-地图-教程-地图 JS API v2.0 | 高德地图API