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需要配合您的安全密钥一起使用。

开发一个地图组件

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 的用法有区别，切记不能混合使用）强烈建议您在使用时按照本文推荐的的用法进行使用。

在 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,
  }
},

创建地图

地图初始化函数 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();
}

JS API_Vue2开发示例

JS API_Vue3开发示例