高德地图- JS API 结合Vue使用

1：NPM 安装 Loader 

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

2：新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件，用作地图组件。

3：创建地图容器

在 MapContainer.vue 地图组件中创建 <div> 标签作为地图容器 ，并设置地图容器的 id 属性为 container。

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

 4：设置地图容器样式

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

5：引入JS API  Loader 

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader 

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

6:初始化 Map

6.1：在 Vue2 中使用：

在 data 函数中不声明 map 对象，可以直接使用this.map赋值或者采用非响应式的普通对象来存储。

data(){return{//此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。//map:null,} 
},

 6.2

在 Vue3 中使用

首先需要引入 Vue3 的 shallowRef() 方法（使用 shallowRef() 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JS API 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）。

import { shallowRef } from '@vue/reactivity'

  在 setup() 函数中声明 map 对象

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

7：创建地图

地图初始化函数 initMap()

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

调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法

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