JS API 结合 Vue 使用

2024-07-04 01:41| 来源: 网络整理| 查看: 265

功能简介

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

本章教程将介绍如何在 Vue 中使用自定义组件结合 JS API 加载、创建和销毁地图。

应用场景

如果您的项目是使用 Vue 框架，建议您将地图的初始化封装成组件，这样更便于使用 Vue 组件的生命周期来加载、创建和销毁地图。

Demo示例

下载 Vue 2 组件完整代码

下载 Vue 3 组件完整代码

使用说明

准备成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

提示

您在2021年12月02日以后申请的key需要配合您的安全密钥一起使用。

开发一个地图组件1按 NPM 方式安装使用 Loader npm i @amap/amap-jsapi-loader --save2新建 MapContainer.vue 文件

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

3创建地图容器

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

4设置地图容器样式 #container{ padding:0px; margin: 0px; width: 100%; height: 800px; } 5引入 JS API Loader

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

import AMapLoader from '@amap/amap-jsapi-loader';6创建地图组件

在 MapContainer.vue文件中初始化地图

vue 2 中的组件形式 import AMapLoader from "@amap/amap-jsapi-loader"; export default { name: "map-view", mounted() { this.initAMap(); }, unmounted() { this.map?.destroy(); }, methods: { initAMap() { window._AMapSecurityConfig = { securityJsCode: "「你申请的安全密钥」", }; AMapLoader.load({ key: "", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...'] }) .then((AMap) => { this.map = new AMap.Map("container", { // 设置地图容器id viewMode: "3D", // 是否为3D地图模式 zoom: 11, // 初始化地图级别 center: [116.397428, 39.90923], // 初始化地图中心点位置 }); }) .catch((e) => { console.log(e); }); }, }, }; #container { width: 100%; height: 800px; } vue 3 中的组件形式

import { onMounted, onUnmounted } from "vue"; import AMapLoader from "@amap/amap-jsapi-loader"; let map = null; onMounted(() => { window._AMapSecurityConfig = { securityJsCode: "「你申请的安全密钥」", }; AMapLoader.load({ key: "", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...'] }) .then((AMap) => { map = new AMap.Map("container", { // 设置地图容器id viewMode: "3D", // 是否为3D地图模式 zoom: 11, // 初始化地图级别 center: [116.397428, 39.90923], // 初始化地图中心点位置 }); }) .catch((e) => { console.log(e); }); }); onUnmounted(() => { map?.destroy(); }); #container { width: 100%; height: 800px; } 提示

JS API Loader是我们提供的 API 加载器，其加载方式为异步加载 JS API 内容，所以在使用 AMap 对象前需进行验证，这种使用场景下，JS API 不会阻塞页面其他内容的执行和解析，但是脚本解析将有可能发生其他脚本资源执行之后，因为需要特别处理，以保证在 AMap对象完整生成之后再调用 JS API 的相关接口，否则有可能报错。

JS API 安全密钥使用

【本文地址】

公司简介

联系我们