开发 地图 JS API 2.0 进阶教程 基础 JS API 结合 Vue 使用

JS API 结合Vue使用 最后更新时间: 2023年03月30日

本文主要讲述 JS API 与 Vue 结合使用,Vue 是一套用于构建用户界面的渐进式前端框架。本文可以帮助您轻松的把地图嵌入到 Vue 项目中。如果您有更复杂的需求,您同样可以自定义开发一个地图组件,然后根据 JS API 做高德地图允许你做的一切事情。下面将介绍 JS API 基于 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 地图组件中创建 <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

注意

初始化 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()

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();
}
示例
中心
常见
问题
智能
客服