前端vue引入高德地图入门教程

距离上一篇关于前端项目中使用高德地图的文章已经将近5年之久,
这是我的第一篇关于高德地图的文章
这期间前端技术日新月异,5年前JQuery还如日中天,如今已经销声匿迹,很少有公司招聘还在要求JQuery,更多的是Vue、React。
如今更多采用模块化开发,结合webpack、vite,我们可以按照业务功能拆分模块。
我们可以把高德地图相关功能封装成功能模块,在使用时按需引入即可。

本教程使用ESM开发,如果还不熟悉该语法,请尽快学习。

前期准备工作

  1. 首先成为开发者
    在这里插入图片描述
  2. 注册完登录 创建新应用
    在这里插入图片描述
  3. 创建key
    填入相关信息
    在这里插入图片描述
  4. 生成key和安全秘钥
    key安全秘钥,在地图模块初始化时需要用到
    在这里插入图片描述
    至此,前期准备工作已经完成。

模块化引入

安装高德地图包
npm i @amap/amap-jsapi-loader
步骤

  1. 提供一个地图挂载点,并设置宽高
  2. 引入地图加载方法,执行load方法,返回AMap构造函数
  3. 实例化构造函数,生成地图实例

模块加载

本地新建js文件,后续页面内使用地图功能,可以导入该模块
在这里插入图片描述

// gmap.js
import AMapLoader from '@amap/amap-jsapi-loader'

结合安全秘钥使用

Nginx配置
在这里插入图片描述

// gmap.js
// 需要在地图初始化加载前,设置该项
window._AMapSecurityConfig = {// 需要服务器配置,代理高德地图相关地址,路径固定为 ‘ /_AMapService ’serviceHost:'http://xxxxxx/_AMapService',  
}

初始化配置

// gmap.js
const AMap = await AMapLoader.load({"key": "xxxxxxxxxxxx", // 申请好的Web端开发者Key,首次调用 load 时必填"version": "2.0",   // 指定要加载的 JS API 的版本,缺省时默认为 1.4.15"plugins": [],           // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})

实例化

// 实例化该构造函数,在调用该方法时,传入参数
const map = new AMap.Map(domContainer = 'map', options = {});

完整的 gmap.js


页面中使用地图模块

在vue页面中使用该模块

  1. 首先在页面中添加元素作为挂载点
    在这里插入图片描述
  2. 并设置宽高(必须)
    在这里插入图片描述

引入该模块,并初始化地图

<template><div><div id="map"></div></div>
</template>
<script>
import GMapInit from './utils/gmap'
export default {name: "",data(){return {map: null,}},mounted() {this.mapInit()},methods: {mapInit () {GMapInit('map', {viewMode: '3D',  // 默认使用 2D 模式zoom: 11,  //初始化地图层级center: [116.397428, 39.90923]  //初始化地图中心点}).then(map => {this.map = mapthis.map.on('complete', () => {console.log('地图加载完毕')})})}},beforeDestroy () {this.map.destroy()},
}
</script>
<style scoped>#map {width: 200px;height: 200px;}
</style>

在这里插入图片描述
在这里插入图片描述

至此,页面上已经成功显示地图

地图加载完成事件

this.map.on('complete', ()=> {// 地图图块加载完成后,触发该回调
})

页面销毁,需要销毁地图

提升性能,释放内存占用,当前地图容器被清空。
在页面卸载生命周期中,执行地图销毁事件

beforeDestroy () {this.map.destroy();
}

未完待续。。。

如果有什么业务上相关的问题,也可以留言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/93894.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow-slim包进行图像数据集分类---具体流程

TensorFlow中slim包的具体用法 1、训练脚本文件&#xff08;该文件包含数据下载打包、模型训练&#xff0c;模型评估流程&#xff09;3、模型训练1、数据集相关模块&#xff1a;2、设置网络模型模块3、数据预处理模块4、定义损失loss5、定义优化器模块 本次使用的TensorFlow版本…

合宙Air724UG LuatOS-Air LVGL API控件--复选框 (Checkbox)

复选框 (Checkbox) 复选框主要是让用户进行一些内容选择&#xff0c;或者同意用户协议。 示例代码 – 复选框回调函数 function event_handler(obj, event) if event lvgl.EVENT_VALUE_CHANGED then print(“State”, lvgl.checkbox_is_checked(obj)) end end – 创建复选框…

【前端demo】简易计算器 原生实现

文章目录 效果代码htmlcssjs 其他demo&#xff1a;https://blog.csdn.net/karshey/article/details/132585901 效果 效果预览&#xff1a;https://codepen.io/karshey/pen/RwERjGz 参考&#xff1a; js实现仿华为手机计算器&#xff0c;兼容电脑和手机屏幕_dengluandai1740的…

Golang数据结构和算法

Golang数据结构和算法 数据的逻辑结构和物理结构常见数据结构及其特点算法的时间复杂度和空间复杂度Golang冒泡排序Golang选择排序Golang插入排序Golang快速排序Golang归并排序Golang二分查找Golang sort包Golang链表Golang container/list标准库Golang栈stackGolang二叉搜索树…

JasperReport定义变量后打印PDF变量为null以及整个pdf文件为空白

问题1: JasperReport打印出来的整个pdf文件为空白文件&#xff1b; 问题2&#xff1a;JasperReport定义变量后打印PDF变量为null&#xff1b; 问题1原因是因为缺少数据源JRDataSource JasperFillManager.fillReport(jasperReport, params,new JREmptyDataSource());如果你打印…

python爬虫-Selenium

一、Selenium简介 Selenium是一个用于Web应用程序测试的工具&#xff0c;Selenium 测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。模拟浏览器功能&#xff0c;自动执行网页中的js代码&#xff0c;实现动态加载。 二、环境配置 1、查看本机电脑谷歌浏览器的版…

全民健康生活方式行动日,天猫健康联合三诺生物推出“15天持续测糖计划”

糖尿病是全球高发慢性病中患病人数增长最快的疾病&#xff0c;是导致心血管疾病、失明、肾衰竭以及截肢等重大疾病的主要病因之一。目前中国有近1.4亿成人糖尿病患者&#xff0c;科学的血糖监测和健康管理对于糖尿病患者来说至关重要。 在9月1日全民健康生活方式行动日前夕&am…

【Linux】fork函数的基础知识

文章目录 前言一、fork的返回值二、常见问题 1.为什么fork要给子进程返回0&#xff0c;给父进程返回子进程pid&#xff1f;2.一个函数返回两次值怎么理解&#xff1f; 3.一个变量怎么会有不同的内容&#xff1f; 4.fork函数干了什么&#xff1f; 前言 fork初识&#xff1a; …

RabbitMQ-常用命令

RabbitMQ常用命令 3.1 启动停止rabbitMQ命令 # 前台启动Erlang VM 和 RabbitMQ 当窗口关闭或者ctrlc时&#xff0c;使退出了。 rabbitmq-server# 使用系统命令启动 systemctl start rabbitmq-server# 后台启动 rabbitmq-server -detached# 停止rabbitMQ和Erlang VM rabbitmq-…

40、Thymeleaf的自动配置和基本语法、springboot 整合 Thymeleaf

★ Spring Boot支持如下模板技术&#xff1a; FreeMarkerGroovyThymeleafMustache官方推荐使用 ThymeleafJSP不再被推荐。★ Thymeleaf的优势 Thymeleaf标准方言中的大多数处理器都是属性处理器。这种页面模版即使在未被处理之前&#xff0c;浏览器也可正确地显示HTML模板文件…

Ubuntu入门05——磁盘管理与备份压缩

1.检查磁盘空间占用情况 2.统计目录或文件所占磁盘空间大小 3.压缩 3.1 zip、unzip和zipinfo 运行时发现上面命令不成功&#xff0c;换成&#xff1a; &#xff08;将文件lkw放入压缩文件lkw01.zip中&#xff09; sudo zip -m lkw01.zip lkw 解压文件&#xff1a; 实操&…

Docker 常用服务 安装使用 教程

Docker安装常用服务 1、 安装mysql # 1.拉取mysql镜像到本地 docker pull mysql:tag (tag不加默认最新版本) # 2.运行mysql服务 docker run --name mysql -e MYSQL_ROOT_PASSWORDroot -d mysql:tag --没有暴露外部端口外部不能连接 docker run --name mysql -e MYSQL_ROOT_PAS…