Vue3使用高德地图(3分钟快速上手)

一.、在高德开发平台注册账号

 高德开放平台 | 高德地图API (amap.com)

二、我的 > 管理管理中添加Key

三、安装依赖

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

四、创建一个放置地图的容器

<template><div class="container"></div>
</template><style scoped>
.container {width: 400px;height: 400px;
}
</style>

五、地图的使用

let map = null;
window._AMapSecurityConfig = {securityJsCode: ''//申请好的秘钥
}
onMounted(() => {AMapLoader.load({key: "", // 申请好的Web端开发者Key,首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins: ['AMap.Geocoder'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等}).then((AMap) => {var geocoder = new AMap.Geocoder({// city: '010' // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode})geocoder.getLocation(想定位的某个城市, function (status, result) {console.log(status, result);if (status === 'complete' && result.info === 'OK') {var lnglat = result.geocodes[0].locationconsole.log(lnglat);// result中对应详细地理坐标信息map = new AMap.Map("container", {// 设置地图容器idviewMode: "3D", // 是否为3D地图模式zoom: 11, // 初始化地图级别center: [lnglat.lng, lnglat.lat], // 初始化地图中心点位置});}})}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});

六、总结

        高德地图广泛应用于日常出行、旅游规划、商业定位等领域,可以为用户提供丰富而全面的地图服务和位置信息。希望此篇文章对您能有所帮助!

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

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

相关文章

高效日志为服务器保驾护航

1.游戏日志的重要性 日志,无论是对于开发环境,还是生产环境,都有着非常重要的作用,具体如下: 跟踪和记录应用程序的运行状态,以便进行故障排查和问题定位。提供应用程序的运行性能数据,以便优化和改进应用程序的性能。收集用户行为和反馈,以便进行用户行为分析和用户体…

2024-03-19 事业-代号s-商城系统-记录

摘要: 2024-03-19 事业-代号s-商城系统-记录 商城系统: BeikeShop官网 | 免费开源跨境电商建站 Laravel Ecommerce Laravel Shop BeikeShop商城 多语言商城 多货币商城 100%全开源 ChatGPT OpenAI B2C商城系统 H5商城 PHP商城系统 商城源码 PC商城 跨境电商系统 跨境商城系统 …

网工内推 | 信息安全主管,CISP认证优先,最高25K,加绩效提成

01 福建省数字福建云计算运营有限公司 招聘岗位&#xff1a;网络及信息安全主管 职责描述&#xff1a; 1.负责带领IT运维团队&#xff0c;对公司网络与安全整体架构规划&#xff0c;设计、运营及IT设备的全生命周期运维规划等&#xff1b; 2.负责对网络、网络安全的日常运维管…

C++中虚表是什么

定义 虚函数&#xff08;Virtual Function&#xff09; 定义&#xff1a;类中使用virtual 关键字修饰的函数 叫做虚函数 语法&#xff1a; class Base { public:virtual void show() { cout << "Base show" << endl; } }; 虚函数表&#xff08;Virtual…

印刷企业实施MES管理系统如何做好需求分析

在数字化、信息化的大潮中&#xff0c;印刷企业面临着转型升级的迫切需求。MES管理系统作为连接企业资源计划ERP和现场自动化系统的桥梁&#xff0c;对于提升印刷企业的生产效率、优化资源配置、提高产品质量具有重要意义。因此&#xff0c;做好MES管理系统的需求分析&#xff…

【TCP/IP】【调试】Windows系统下,双网卡如何配置静态路由,实现同时访问内外网

&#x1f41a;作者简介&#xff1a;花神庙码农&#xff08;专注于Linux、WLAN、TCP/IP、Python等技术方向&#xff09;&#x1f433;博客主页&#xff1a;花神庙码农 &#xff0c;地址&#xff1a;https://blog.csdn.net/qxhgd&#x1f310;系列专栏&#xff1a;TCP/IP协议&…

多线程(部分)

Day28下2 多线程 一、什么是进程 进程是系统进行资源分配和调用的独立单元&#xff0c;每一个进程都有它的独立内存空间和系统资源。 二、单进程操作系统和多进程操作系统的区别 单进程操作系统&#xff1a;dos&#xff08;一瞬间只能执行一个任务&#xff09; 多进程单用户操…

面试宝典:MySQL 索引优化

在数据库的世界里,索引是提升查询效率的关键。对于高级开发者来说,理解并能够优化MySQL索引是提升应用性能的重要技能。本文将深入探讨MySQL索引的原理、类型以及优化策略,帮助你在面试中脱颖而出。 索引的基本原理 MySQL中的索引基于B+树(Balanced Tree)数据结构,它提…

equals与时间序列攻击

引言 随着信息技术的迅速发展&#xff0c;网络安全和隐私问题变得愈发重要。黑客和攻击者不断寻找新的攻击方法&#xff0c;其中之一是时间序列攻击&#xff08;Timing Attack&#xff09;。时间序列攻击是一种侧信道攻击&#xff0c;攻击者试图通过测量程序的执行时间来推断程…

Vue3语法插件Volar在vsCode中搜不到,Volar正式更名为Vue-Official

问题描述 今天拿Vue3的cli练手&#xff0c;之前用的语法插件是Vue2的Vetur&#xff0c;对于Vue3来说该插件不能完美匹配了&#xff0c;所以就想切换回Volar&#xff0c;结果万万没想到&#xff0c;找不着了&#xff1f;&#xff1f;&#xff1f;&#xff01;&#xff01;&…

git stash clear/drop 后如何恢复

git stash clear/drop 后代码如何恢复 事故经过 切换分支前有修改未提交的代码&#xff0c;使用 git stash 存储了当前的代码切换分支再返回自己开发的分支本来要进行 git stash pop 操作&#xff0c;然后 git stash list 发现有好几个 stash记录于是想清除没用的 stash 记录…

【Linux】进程优先级 命令行参数 环境变量

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、进程优先级 1.1、进程优先级的基本概念 1.2、优先级 VS 权限 1.3、为什么要有优先级&#xff1f; 1.4、Linux的优先级的特点 && 查看方式 1.…

伦敦金是合法的吗

作为国际黄金市场的代表&#xff0c;“伦敦金”这一术语频繁出现在各类财经报道与投资者交流之中&#xff0c;其合法性始终是投资者关注的核心问题。本文将以“伦敦金是合法的吗&#xff1f;”为主题&#xff0c;全方位剖析伦敦金在全球范围及中国境内的法律地位和投资环境。 “…

【0273】深入分析 relcache(relation descriptor cache)初始化第一阶段

1. 前言 本文是《【0264】深入分析relcache(relation descriptor cache)缓存初始化第2阶段》 的前传。在该文中,我们得知PG内核初始化relcache时,一共有三个阶段: 阶段(1) RelationCacheInitialize()阶段(2) RelationCacheInitializePhase2()阶段(3) RelationCache…

代码随想录算法训练营第四十三天|卡码网52. 携带研究材料(第七期模拟笔试)、518. 零钱兑换 II、377. 组合总和 Ⅳ

卡码网52. 携带研究材料&#xff08;第七期模拟笔试&#xff09; 刷题https://kamacoder.com/problempage.php?pid1052文章讲解https://programmercarl.com/%E8%83%8C%E5%8C%85%E9%97%AE%E9%A2%98%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80%E5%AE%8C%E5%85%A8%E8%83%8C%E5%8C%85.…

MySQL关联查询如何优化

好久不见&#xff0c;关于这篇文章&#xff0c;我也是想了很久&#xff0c;还是决定写一篇文章&#xff0c;有很多同学问过 mysql 相关的问题&#xff0c;其实关联查询如何优化&#xff0c;首先我们要知道关联查询的原理是什么&#xff1f; 左连接 left join SELECT 字段列表…

SpringBoot+定时器

定时器 1.定时器的多种实现1.1 Timer TimerTask)1.2 ScheduledExecutorService 1.定时器的多种实现 JDK自带的Timer TimerTask 优点: 简单易用, 支持延迟执行和周期性执行任务 缺点: 在多线程环境下存在问题, 例如任务执行时间较长, 可能会影响其他任务的执行不适合在需要精…

携程Kar98k/hotelUuidKey算法分析

声明 本文以教学为基准、本文提供的可操作性不得用于任何商业用途和违法违规场景。 本人对任何原因在使用本人中提供的代码和策略时可能对用户自己或他人造成的任何形式的损失和伤害不承担责任。 如有侵权,请联系我进行删除。 这里只是我分析的分析过程,以及一些重要点的记录…

SpringBoot的 ResponseEntity类讲解(具体讲解返回给前端的一些事情)

概述&#xff1a;ResponseEntity是Spring框架中的一个类&#xff0c;用于封装HTTP响应的相关信息&#xff0c;包括状态码、响应头和响应体。它通常用于控制器方法中返回一个包含特定数据的HTTP响应。 ResponseEntity ResponseEntity类的主要特点如下&#xff1a; 可以自定义H…

【ARM】DS中Coretex-M处理器的常用寄存器介绍

【更多软件使用问题请点击亿道电子官方网站查询】 1、 文档目标 了解ArmDS中Coretex-M处理器的常用寄存器的名称及作用。 2、 问题场景 在对Coretex-M处理器进行开发时&#xff0c;了解常用寄存器的名称及作用&#xff0c;可以&#xff1a; 编写正确的程序: 寄存器是程序员用…