JavaScript使用高德API显示地图

news/2024/10/4 15:04:09/文章来源:https://blog.csdn.net/weixin_42952508/article/details/142034968

前言

在JavaScript中,使用Leaflet库显示地图是一种常见的做法。Leaflet是一个开源的JavaScript库,用于在Web应用程序中创建互动地图。它非常轻量级,易于使用,并且提供了多种功能,使开发者能够轻松地将地图集成到他们的项目中。
本次我们使用高德地图API来显示我们的地图,其实所有的大概都大差不差

如何使用?

准备-入门-教程-地图 JS API 1.4|高德地图API (amap.com)
● 上面是高德地图的开放平台,我们可以大概简单的看下,上面有详细的教程
在这里插入图片描述

● 如果我们需要使用一些天气、自定义地图、搜索、路线规划、地理编码等服务的话,需要申请key才能能够使用,不需要申请key也可以正常的使用地图;
在这里插入图片描述

● 下面,我们就直接来引入
在这里插入图片描述
在这里插入图片描述

● 下面我们将我们的经度纬度传入进去就可以了,还需要写一个marker来使用箭头标记我们目前的所在位置

if (navigator.geolocation)navigator.geolocation.getCurrentPosition(function (position) {const { latitude } = position.coords;const { longitude } = position.coords;console.log(position);const map = new AMap.Map('map', {center: [longitude, latitude],zoom: 11,});const marker = new AMap.Marker({position: [longitude, latitude], // 标记位置});marker.setMap(map);},function () {alert('无法获取你的位置!');});

在这里插入图片描述

● 这样就可以将地图显示出来了

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

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

相关文章

【自动驾驶】控制算法(八)横向控制Ⅰ | 算法与流程

写在前面: 🌟 欢迎光临 清流君 的博客小天地,这里是我分享技术与心得的温馨角落。📝 个人主页:清流君_CSDN博客,期待与您一同探索 移动机器人 领域的无限可能。 🔍 本文系 清流君 原创之作&…

IBM Storwize V7000存储控制器故障节点报错574

背景:由于客户机房搬迁,需要下电迁移设备。该存储自2016年投入生产使用后,从未关过机,已正常运行七八年时间,期间只更换过硬盘,无其他硬件故障。 在GUI界面点击关闭系统后,大概等了40分钟&…

轨迹规划-B样条

B样条究竟是干啥的?白话就是给出一堆点,用样条的方式,给这些点连接起来,并保证丝滑的。 同时B样条分为准均匀和非均匀,以下为准均匀为例。 参考链接1:https://zhuanlan.zhihu.com/p/50626506https://zhua…

汽车功能安全--TC3xx之PBIST、MONBIST

目录 1.PMS 电源监控速览 2.PBIST 3.MONBIST 4.小结 1.PMS 电源监控速览 英飞凌TC3xx芯片的四种硬件机制,分别是: PMS:PBIST: Power Built-in Self Test. MCU:LBIST: Logic Built-in Self Test. PMS:MONBIST: Monitor Built-in Self Test. VMT:MBI…

前端面试八股文

1. HTTP 和 HTTPS 1、http 和 https 的基本概念 http: 是一个客户端和服务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。 https:是以安全为目标的 HTTP 通道,即 HTTP 下 加入 SSL 层进…

手机如何切换网络IP地址:‌方法详解与操作指南‌

在当今的数字化时代,‌网络IP地址作为设备在网络中的唯一标识,‌扮演着至关重要的角色。‌对于手机用户而言,‌了解如何切换网络IP地址不仅有助于提升网络体验,‌还能在一定程度上保护个人隐私。‌本文将详细介绍手机切换网络IP地…

springboot 整合swagger

没有多余废话&#xff0c;就是干 spring-boot 2.7.8 springfox-boot-starter 3.0.0 结构 POM.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/…

抢鲜体验 PolarDB PG 15 开源版

unsetunsetPolarDB 商业版unsetunset 8 月&#xff0c;PolarDB PostgreSQL 版兼容 PostgreSQL 15 版本&#xff08;商业版&#xff09;正式发布上线。 当前版本主要增强优化了以下方面&#xff1a; 改进排序功能&#xff1a;改进内存和磁盘排序算法。 增强SQL功能&#xff1a;支…

easyExcel-读取Excel

1、简单读取&#xff0c;没有合并单元格 2、复杂读取&#xff0c;合并单元格-方法一 1、简单读取&#xff0c;没有合并单元格 1.1、引入pom文件 <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.…

若楠带你初识OpenCV(6) -- 轮廓近似与模板匹配

文章目录 OpenCV轮廓近似1. 读取灰度图2. 二值化阈值处理3. 查找轮廓4. 轮廓近似5. 绘画近似图像 模板匹配1. 读取图片2. 查找与模板图像最匹配的区域3. 找到得分的最大值及其位置4. 绘制匹配区域完整代码 总结 OpenCV OpenCV&#xff08;Open Source Computer Vision Library…

一般位置下的3D齐次旋转矩阵

下面的矩阵虽然复杂&#xff0c;但它的逆矩阵求起来非常简单&#xff0c;只需要在 sin ⁡ θ \sin\theta sinθ 前面加个负号就是原来矩阵的逆矩阵。 如果编程序是可以直接拿来用的&#xff0c;相比其它获取一般旋转轴不经过原点的三维旋转矩阵的途径或算法&#xff0c;应该能…

【H2O2|全栈】关于HTML(6)HTML基础(五 · 完结篇)

HTML基础知识 目录 HTML基础知识 前言 准备工作 标签的具体分类&#xff08;五&#xff09; 本文中的标签在什么位置中使用&#xff1f; 表单&#xff08;二&#xff09; 下拉选择菜单 文本域 案例 拓展标签 iframe框架 案例 预告和回顾 后话 前言 本系列博客介…

建筑二次供水的基本概念

什么是二次供水? 二次供水是城市供水的主要组成部分,是指集中式供水在入户之前经再度储存、加压和消毒后,通过管道输送给用户的供水方式。 为什么要使用二次供水? 由于市政供水的服务水压通常只能达到较低的楼层,而对于超过这个水压高度的建筑物,如高层住宅,就必须通…

小琳AI课堂:深入学习BERT

大家好&#xff0c;这里是小琳AI课堂。今天我们来聊聊BERT&#xff0c;这个在自然语言处理&#xff08;NLP&#xff09;领域掀起革命风潮的模型。 出现背景 在BERT之前&#xff0c;NLP领域主要依赖RNN或CNN模型&#xff0c;这些模型大多只能单向处理文本&#xff0c;从左到右…

python中.之后的圈c、圈v分别代表什么意思?

python中.之后的圈c、圈v分别代表什么意思&#xff1f; Python中&#xff0c;.之后的圈c表示类的实例方法&#xff0c;而圈v表示类的成员变量。 在面向对象编程中&#xff0c;类是一种抽象的数据类型&#xff0c;实例方法是定义在类中的函数&#xff0c;用于操作类的实例变量…

端口安全老化细节

我们都知道port-security aging-time命令用来配置端口安全动态MAC地址的老化时间&#xff0c;但是后面还可以加上类型&#xff1a; [SW1-GigabitEthernet0/0/1]port-security aging-time 5 type absolute Absolute time 绝对老化 inactivity Inactivity time相对老化 …

LC1860C 后来怎么样了

这块芯片前身是大唐旗下联芯的LC1860C&#xff1b;这块传奇芯片在4G时代大放异彩&#xff0c;但是某些原因之后&#xff0c;技术打包转让给三家&#xff0c;分别是&#xff1a;小米&#xff0c;大疆&#xff0c;哲酷&#xff08;VIVO&#xff09;&#xff1b; 1、哲酷 哲酷目…

四.海量数据实时分析-Doris数据导入导出

数据导入 1.概述 Apache Doris 提供多种数据导入方案&#xff0c;可以针对不同的数据源进行选择不同的数据导入方式。 数据源导入方式对象存储&#xff08;s3&#xff09;,HDFS使用 Broker 导入数据本地文件Stream Load, MySQL LoadKafka订阅 Kafka 数据Mysql、PostgreSQL&a…

综合案例-数据可视化-地图

一、pyecharts—地图快速入门 假设我们要将6个地区的某种数量在地图上标注出来&#xff0c;首先导入pyecharts包内地图相关模块&#xff0c;然后准备地图数据&#xff08;数据类型是列表&#xff0c;列表的元素类型为元组&#xff09;&#xff0c;然后把准备好的数据添加进地图…

自动驾驶ADAS算法--使用MATLBA和UE4生成测试视频

原文参考&#xff1a;金书世界 环境搭建参考&#xff1a;用MATLAB2020b和虚拟引擎&#xff08;Unreal Engine&#xff09;联合仿真输出AVM全景测试视频----Matlab环境搭建 matlab参考&#xff1a; https://ww2.mathworks.cn/help/driving/ug/simulate-a-simple-driving-sce…