JS API 结合Vue使用 最后更新时间: 2023年03月30日
本文主要讲述 JS API 与 Vue 结合使用,Vue 是一套用于构建用户界面的渐进式前端框架。本文可以帮助您轻松的把地图嵌入到 Vue 项目中。如果您有更复杂的需求,您同样可以自定义开发一个地图组件,然后根据 JS API 做高德地图允许你做的一切事情。下面将介绍 JS API 基于 Vue 组件的完整示例。
准备
为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。
您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。
开发一个地图组件
NPM 安装 Loader
npm i @amap/amap-jsapi-loader --save
新建 MapContainer.vue 文件
在项目中新建 MapContainer.vue 文件,用作地图组件。
创建地图容器
在 MapContainer.vue 地图组件中创建 <div> 标签作为地图容器 ,并设置地图容器的 id 属性为 container。
<template>
<div id="container"></div>
</template>
设置地图容器样式
<style scoped>
#container{
padding:0px;
margin: 0px;
width: 100%;
height: 800px;
}
</style>
引入JS API Loader
在地图组件 MapContainer.vue 中引入 amap-jsapi-loader
import AMapLoader from '@amap/amap-jsapi-loader';
初始化 Map
初始化 map 对象(注意此处声明 map 对象时 vue2 和 vue3 的用法有区别,切记不能混合使用)强烈建议您在使用时按照本文推荐的的用法进行使用。
在 data 函数中不声明 map 对象,可以直接使用this.map赋值或者采用非响应式的普通对象来存储。
data(){
return{
//此处不声明 map 对象,可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
//map:null,
}
},
首先需要引入 Vue3 的 shallowRef() 方法(使用 shallowRef() 进行非深度监听,因为在 Vue3 所使用的 Proxy 拦截操作会改变 JS API 原生对象,所以此处需要区别 Vue2 使用方式对地图对象行非深度监听,否则会出现问题,建议 JS API 相关对象采用非响应式的普通对象来存储)。
import { shallowRef } from '@vue/reactivity'
在 setup() 函数中声明 map 对象
setup(){
const map = shallowRef(null);
return{
map,
}
},
创建地图
地图初始化函数 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);
})
},
},
JS API Loader是我们提供的 API 加载器,其加载方式为异步加载 JS API 内容,所以在使用 AMap 对象前需进行验证,这种使用场景下,JS API 不会阻塞页面其他内容的执行和解析,但是脚本解析将有可能发生其他脚本资源执行之后,因为需要特别处理,以保证在 AMap对象完整生成之后再调用 JS API 的相关接口,否则有可能报错。
调用地图初始化函数:mounted 函数会在 DOM 初始化完成后调用,建议在 mounted 函数中调用地图初始化方法。
mounted(){
//DOM初始化完成进行地图初始化
this.initMap();
}