您现在的位置: 开发 > 地图 JS API v2.0 > 教程 > JSAPI与前端框架结合 > JSAPI结合Vue使用

JSAPI结合Vue使用 最后更新时间: 2022年05月13日

       本文主要讲述 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;

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

4.设置地图容器样式

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

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

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

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

在 Vue2 中使用方式:

在 data 函数中声明 map 对象

data(){
      return{
        map:null,
     } 
 },

在 Vue3 中使用以下方式:

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

import { shallowRef } from '@vue/reactivity'

 在 setup 函数中声明 map 对象

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

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

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

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

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

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

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

示例
中心
常见
问题
智能
客服