JavaScript使用高德API显示地图

前言

在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.rhkb.cn/news/419700.html

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

相关文章

“知识启航·新年新题”——2025年粉丝专属学术助力计划

一、活动背景与目的 为了感谢广大粉丝一直以来的支持与厚爱,我们特别推出“知识启航新年新题”2025年粉丝专属学术助力计划。本次活动旨在通过提供免费的开题报告、免费的任务书以及一系列学术指导服务,助力粉丝在新的一年里开启学术与项目研究的新篇章…

C# 获取系统使用情况

一个简单的小工具,主要用来获取当期的电脑信息以及内存的使用情况。本来也没想着写这个玩意,还不如随便下个相关的软件好使,但是前一段时间为了追查系统卡顿的问题,所以就加上了一段统计内存的代码,用来看看是否由这个…

DDComponentForAndroid:探索Android组件化方案

在现代Android应用开发中,随着应用规模的不断扩大,传统的单体应用架构已经无法满足快速迭代和维护的需求。组件化架构作为一种解决方案,可以将应用拆分成多个独立的模块,每个模块负责特定的功能,从而提高代码的可维护性…

PWR电源控制(低功耗模式)

1 PWR简介 1 程序后面是空循环,即使不用也会耗电,所以有了低功耗(例如遥控器) 2 也要保留唤醒模式,如串口接收数据中断唤醒,外部中断唤醒,RTC闹钟唤醒,在需要工作是,ST…

【redis】redis的特性和主要应用场景

文章目录 redis 的特性在内存中存储数据可编程的扩展能力持久化集群高可用快 redis 的应用场景实时数据存储缓存消息队列 redis 的特性 redis 的一些特性(优点)成就了它 在内存中存储数据 In-memory data structures MySQL 主要是通过“表”的方式来…

分享基于PDF.JS的移动端PDF阅读器代码

一、前言 在之前的文章《分享基于PDF.js的pdf阅读器代码》里提到了PC端基于PDF.js的阅读器,本文将提供针对移动端的版本。 二、pdfViewer 为了能够直接使用,这里分享一下经过简单修改后能直接使用的pdfViewer代码: pdfViewer代码目录&…

如何在红米手机中恢复已删除的照片?(6 种方式可供选择)

凭借出色的相机和实惠的价格,小米红米系列已成为全球知名品牌。但是,最近有些人抱怨他们在 红米设备上丢失了许多珍贵的图片或视频,并希望弄清楚如何从小米手机恢复已删除的照片。好吧,在小米设备上恢复已删除的视频/照片并不难。…

基于Pytorch框架的深度学习U2Net网络精细天空分割系统源码

第一步:准备数据 头发分割数据,总共有10276张图片,里面的像素值为0和1,所以看起来全部是黑的,不影响使用 第二步:搭建模型 级联模式 通常多个类似U-Net按顺序堆叠,以建立级联模型&#xff0c…

移动端视频编辑SDK解决方案,AI语音识别添加字幕

对于众多Vlog创作者而言,繁琐的字幕添加过程往往成为提升内容质量的绊脚石。为了彻底改变这一现状,美摄科技凭借其深厚的AI技术积累与创新的移动端视频编辑SDK解决方案,推出了革命性的AI语音识别添加字幕功能,让视频创作更加高效、…

【数据结构】LinkedList ------ java实现

知识框架图&#xff1a; LinkedList是一种常用的数据结构。底层是一个双向链表。每个节点包含数据以及指向前一个节点和后一个节点的引用。 一&#xff1a;LinkedList的使用 1.1 LinkedList的构造方法 方法 解释LinkedList() 无参构造public LinkedList(Collection<? exte…

免费的月考成绩发布小程序

月考成绩出炉&#xff0c;老师们便开始了一项既繁琐又耗时的工作&#xff1a;将成绩单私信给每位学生家长。需要老师们在繁忙的教学工作中抽出自己额外休息的时间&#xff0c;还要确保每位家长都能及时准确的收到自己孩子的成绩单。然而&#xff0c;随着科技的发展&#xff0c;…

Delphi5数据控制组件——查询

文章目录 效果图参考查询Free方法Close方法总结通俗理解 完整代码 效果图 参考 本文是在上一篇的基础上&#xff0c;将查询页面重新写一次。 查询 {点击查询} procedure TForm2.Button1Click(Sender: TObject); vartj,tj1,tj2,tj3,tj4,tj5,tj6,tj7:string; begin//按照工号查…

嵌入式Openharmony系统构建与启动详解

大家好,今天主要给大家分享一下,如何构建Openharmony子系统以及系统的启动过程分解。 第一:OpenHarmony系统构建 首先熟悉一下,构建系统是一种自动化处理工具的集合,通过将源代码文件进行一系列处理,最终生成和用户可以使用的目标文件。这里的目标文件包括静态链接库文件…

[ios]准备好app后使用xcode发布ios操作

在app代码完成后&#xff0c;点击xcode进行发布

船舶机械设备5G智能工厂物联数字孪生平台,推进制造业数字化转型

船舶机械设备5G智能工厂物联数字孪生平台&#xff0c;推进制造业数字化转型。在当今数字化浪潮推动下&#xff0c;船舶制造业正经历着前所未有的变革。为了应对市场的快速变化&#xff0c;提升生产效率&#xff0c;降低成本&#xff0c;并增强国际竞争力&#xff0c;船舶机械设…

【无人机设计与控制】旋转无人机摆锤的SDRE仿真

摘要 旋转无人机摆锤&#xff08;Double Rotor Pendulum, DRP&#xff09;系统的稳定性控制是现代飞行控制领域的一个挑战性课题。本文采用了状态依赖黎卡提方程&#xff08;SDRE&#xff09;方法对该系统进行建模和仿真&#xff0c;以实现摆锤的稳定控制。通过SDRE方法&#…

内卷时代无人机培训机构如何做大做强

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;“内卷”一词频繁被提及&#xff0c;反映了各行业竞争日益激烈的现象。对于无人机培训行业而言&#xff0c;如何在这样的时代背景下脱颖而出&#xff0c;实现做大做强的目标&#xff0c;成为每个培训机构必须深思的问题。…

ComfyUI+Krea免费利用AI制作网站萌宠IP,五步搞定制作AI萌宠

大家好&#xff0c;这是我们网站的萌宠——Meo喵&#xff0c;是一只猫咪AI工具专家&#x1f43e;&#xff0c;嘻嘻&#x1f389;&#x1f431;。是AIGC年轻的艺术家星之&#xff0c;利用AI产品ComfyUI、Krea&#xff0c;搭配PS制作而成&#xff0c;下面先介绍一下它的形象&…

COD论文笔记 Adaptive Guidance Learning for Camouflaged Object Detection

论文的主要动机、现有方法的不足、拟解决的问题、主要贡献和创新点如下&#xff1a; 动机&#xff1a; 论文的核心动机是解决伪装目标检测&#xff08;COD&#xff09;中的挑战性任务。伪装目标检测旨在识别和分割那些在视觉上与周围环境高度相似的目标&#xff0c;这对于计算…

Bev pool 加速(2):自定义c++扩展

文章目录 1. c++扩展2. 案例2.1 案例12. 1.1 代码实现(1) c++ 文件(2) setup.py编写(3) python 代码编写2.1 案例1在bevfusion论文中,将bev_pooling定义为view transform中的效率瓶颈,bevfusion 主要就是对bev_pooling进行了加速,使得视图转换的速度提高了40倍,延迟从500ms…