JSAPI结合Vue使用最后更新时间: 2023年01月30日

本文主要讲述 JSAPI 与Vue 结合使用，Vue 是一套用于构建用户界面的渐进式前端框架。本文可以帮助您轻松的把地图接入到 Vue 项目中。如果您有更复杂的需求，您同样可以自定义一个地图组件，然后根据 JSAPI 做高德地图允许你做的一切事情。下面将介绍 JSAPI 基于 Vue 组件的完整示例。

一、开发准备

1. 首先，注册开发者账号，成为高德开放平台开发者

2. 登录之后，再进入「应用管理」页面「创建新应用」

3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」。

4. 添加成功后，获取到 Key 值。

二、地图组件开发和使用

获取高德地图 API，可通过JavaScript 脚本的方式加载和官网提供的 JSAPI Loader 为了更好的契合 Vue 使用推荐第二种方式。

1.按 NPM 方式安装使用 Loader ：

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

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

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

HTML

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

4.设置地图容器样式

CSS

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

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

JavaScript

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

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

在 Vue2 中使用方式:

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

JavaScript

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

在 Vue3 中使用以下方式：

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

JavaScript

import { shallowRef } from '@vue/reactivity'

在 setup 函数中声明 map 对象

JavaScript

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

6.地图初始化函数 initMap

JavaScript

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);
        })
    },
},

提示：JSAPI Loader是我们提供的 API 加载器，其加载方式为异步加载 JS API 内容，所以在使用 AMap 对象前需进行验证，这种使用场景下，

JSAPI不会阻塞页面其他内容的执行和解析，但是 JSAPI 的脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在 AMap对象完整生成之后再调用 JSAPI 的相关接口，否则有可能报错。

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

JavaScript

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

5.在地图组件 MapContainer.vue 中引入 amap-jsapi-loader 使用可参考开发实例。（JSAPI_Vue2开发示例，JSAPI_Vue3开发示例）

JSAPI结合Vue使用 最后更新时间: 2023年01月30日

一、开发准备

二、地图组件开发和使用

JSAPI结合Vue使用最后更新时间: 2023年01月30日