vue vue3中使用高德地图

高德地图api官网：https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。

提示

您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

开发一个地图组件

1、NPM 安装 Loader

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

2、新建 MapContainer.vue 文件

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

3、创建地图容器

在 MapContainer.vue 地图组件中创建

标签作为地图容器 ，并设置地图容器的 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

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

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

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

在 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() 配置key和安全密钥

window._AMapSecurityConfig = {
  securityJsCode:'「您申请的安全密钥」',
}
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);
    })
  },
},

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

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

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