当前位置： 首页 > news >正文

高德地图基础教程超详细版

news 2025/12/15 22:54:05

在当前社会，对于地图的使用是很必须的，所以对于程序员来说也是需要掌握的技能，目前主流的又百度地图和高德地图，但是我建议使用高德地图，因为百度地图的API着实不好用吖，不好理解，对于开发人员来说，高德地图是最合适的。不多说，咱们一步一步实现。

1. 准备工作

1.1注册

1.注册开发者账号注册链接

在这里插入图片描述
按照步骤一步步注册就好了

1.2创建应用

在这里插入图片描述
设置名称and类型
在这里插入图片描述

1.3 获取Key

在这里插入图片描述
在这里插入图片描述
创建好了后就可以得到我们要的Key和密钥了，通过这两个就在前端界面使用了
在这里插入图片描述

2. 使用

2.1 创建前端界面

这里我自己创建一个新的页面来演示，如果是自己要放在自己已有的项目界面上的，同样的操作就可以
简简单单一个小页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>地图定位</title><link rel="stylesheet" href="../css/map.css" media="all"><!--记得导入css哈-->
</head>
<body>
<!--创建一个存放地图的容器div，地图就放在这个里面-->
<div id="mapContainer"></div>
<!--在css中去设置这个容器的大小-->
</body>
</html>

css中样式设置：
在这里插入图片描述
注意：如果样式写在和html不在同一层的，记得引入html哈

2.2 导入高德地图API

在页面中想要使用其他包的东西的时候，都是要去引入其他的jar的，地图也不例外

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
注意：这里的key值要修改成自己的应用的key值哟
在这里插入图片描述

2.4 高德地图使用

在我们想要用哪一种地图定位的时候，可以直接去高德地图API文档里面去选择，也可以直接去高德地图示例直接地可以看到想要的结果，里面有很多类型，看中哪个就可以根据API将其放到自己的项目中
在这里插入图片描述
正式开始了噢，这里我们用浏览器精确定位来演示：完整代码见最后，都是一步步来的

  1. 先创建一个地图对象（根据地图容器的id来噢）
<script>//给地图容器去创建一个map对象，这个对象是高德地图自己有的一个插件完成的，所以可以直接调用//创建AMap.Map对象时如果没有传入center参数，地图将自动定位到您所在城市并显示，// 这就是JS API的初始加载定位：无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图：var map = new AMap.Map('container', {resizeEnable: true})
</script>

注意：在这个时候，得到的只是你当前城市的地图，获取不到具体的精确的定位

2.AMap.Geolocation插件获取精确定位

 <script>
//=================接上面的==============//如果只是像上面哪个new了一个地图对象，只能得到当前城市的地图，但是不能获取到精确的位置，// 所以这时要通过AMap.Geolocation插件去完成精确定位的服务AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});//然后将其精确定位对象给放到地图对象中去map.addControl(geolocation);//调用获取当前定位信息，就可以定位到当前定位了geolocation.getCurrentPosition(function(status,result){//里面可以进行拿到定位后的信息});});
</script>

注意：到这个时候，我们就已经能够成功定位到精确位置了，但是很多时候都要去拿到当前位置的很多具体的信息进行下一步的操作，就比如经纬度呀什么的，所以这时我们就要去解析定位信息了

  1. 获取当前定位的具体信息进行解析（完整script代码）
<script>//给地图容器去创建一个map对象，这个对象是高德地图自己有的一个插件完成的，所以可以直接调用//创建AMap.Map对象时如果没有传入center参数，地图将自动定位到您所在城市并显示，// 这就是JS API的初始加载定位：无需传入对应参数就能获取大致的定位信息。以下代码运行后将显示您所在城市的地图：var map = new AMap.Map('container', {resizeEnable: true})//如果只是像上面哪个new了一个地图对象，只能得到当前城市的地图，但是不能获取到精确的位置，// 所以这时要通过AMap.Geolocation插件去完成精确定位的服务AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);//获取geolocation.getCurrentPosition(function(status,result){//里面可以进行拿到定位后的信息});});
</script><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">var map = new AMap.Map('container', {resizeEnable: true});AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,//是否使用高精度定位，默认:truetimeout: 10000,          //超过10秒后停止定位，默认：5sbuttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点});map.addControl(geolocation);geolocation.getCurrentPosition(function(status,result){});});</script>
</body>
</html>

到这里就可以显示了

相关文章：

高德地图基础教程超详细版

在当前社会&#xff0c;对于地图的使用是很必须的&#xff0c;所以对于程序员来说也是需要掌握的技能&#xff0c;目前主流的又百度地图和高德地图&#xff0c;但是我建议使用高德地图&#xff0c;因为百度地图的API着实不好用吖&#xff0c;不好理解&#xff0c;对于开发人员来…...

编程日记 2023/4/2 2:57:58

基于A7核开发板的串口实现控制LED亮灭

1.通过操作Cortex-A7核&#xff0c;串口输入相应的命令&#xff0c;控制LED灯进行工作 1>例如在串口输入led1on,开饭led1灯点亮 2>例如在串口输入led1off,开饭led1灯熄灭 3>例如在串口输入led2on,开饭led2灯点亮 4>例如在串口输入led2off,开饭led2灯熄灭 5>例如…...

编程日记 2023/2/25 7:11:59

HyperGBM用Adversarial Validation解决数据漂移问题

本文作者&#xff1a;杨健&#xff0c;九章云极 DataCanvas 主任架构师 数据漂移问题近年在机器学习领域来越来越得到关注&#xff0c;成为机器学习模型在实际投产中面对的一个主要挑战。当数据的分布随着时间推移逐渐发生变化&#xff0c;需要预测的数据和用于训练的数据分布…...

编程日记 2023/2/25 7:10:52

关基系统三月重保安全监测怎么做？ScanV提供纯干货！

三月重保当前&#xff0c;以政府、大型国企央企、能源、金融等重要行业和领域为代表的关键信息基础设施运营单位都将迎来“网络安全大考”。 对重要关基系统进行安全风险监测并收敛暴露面&#xff0c;响应监管要求进行安全加固&#xff0c;重保期间实时安全监测与数据汇报等具体…...

编程日记 2023/4/2 3:00:52

RK3588关键电路 PCB Layout设计指南

1、音频接口电路 PCB 设计&#xff08;1&#xff09;所有 CLK 信号建议串接 22ohm 电阻&#xff0c;并靠近 RK3588 放置&#xff0c;提高信号质量&#xff1b;&#xff08;2&#xff09;所有 CLK 信号走线不得挨在一起&#xff0c;避免串扰&#xff1b;需要独立包地&#xff0c…...

编程日记 2023/4/2 15:21:22

二分边界详细总结

一、查找精确值 从一个有序数组中找到一个符合要求的精确值&#xff08;如猜数游戏&#xff09;。如查找值为Key的元素下标&#xff0c;不存在返回-1。 //这里是left<right。 //考虑这种情况&#xff1a;如果最后剩下A[i]和A[i1]&#xff08;这也是最容易导致导致死循环的…...

编程日记 2023/2/25 7:07:27

STM32---备份寄存器BKP和 FLASH学习使用

BKP库函数 学习BKP&#xff0c;首先就是知道BKP每一个函数的作用然后如何使用即可 使用备份域的作用只需要操作上面的两个函数即可&#xff0c;其余的都是它的其他功能 BKP简介 备份寄存器是42个16位的寄存器&#xff0c;可用来存储84个字节的用户应用程序数据。他们处在备份…...

编程日记 2023/2/25 7:06:18

Python-生成元组和字典

1.生成元组元组是元素按顺序组合后的产物&#xff0c;元组对象的类型是tuple型含有两个元素的元组成为数据对元组可以包含任意数量和任意类型的元素&#xff0c;其元素总数可以为0、1、2等&#xff0c;并且元素的先后顺序是由意义的。另外&#xff0c;元组中的元素类型没有必要…...

编程日记 2023/4/1 3:53:18

I.MX6ULL内核开发10：设备树

目录 一、设备树简介 二、设备树源码 三、获取设备树信息 1、增加设备节点 2、内核编译设备树 3、替换设备树文件 4、查看设备树节点 5、在驱动中获取节点的属性 6、编译驱动模块 7、加载模块 一、设备树简介 设备树的作用是描述一个硬件平台的硬件资源。这个“设备树…...

编程日记 2023/2/25 7:03:56

【大数据】记一次hadoop集群missing block问题排查和数据恢复

问题描述 集群环境总共有2个NN节点&#xff0c;3个JN节点&#xff0c;40个DN节点&#xff0c;基于hadoop-3.3.1的版本。集群采用的双副本&#xff0c;未使用ec纠删码。 问题如下&#xff1a; bin/hdfs fsck -list-corruptfileblocks / The list of corrupt files under path…...

编程日记 2023/2/25 7:02:48

国产音质好的蓝牙耳机有哪些？国产音质最好的耳机排行

随着时间的推移&#xff0c;真无线蓝牙耳机逐渐占据耳机市场的份额&#xff0c;成为人们日常生活中必备的数码产品之一。蓝牙耳机品牌也多得数不胜数&#xff0c;哪些国产蓝牙耳机音质好&#xff1f;下面&#xff0c;我们从音质出来&#xff0c;来给大家介绍几款国产蓝牙耳机&a…...

编程日记 2023/4/1 3:54:27

CTFer成长之路之XSS的魔力

XSS的魔力CTF XSS闯关 题目描述: 你能否过关斩将解决所有XSS问题最终获得flag呢&#xff1f; docker-compose.yml version: "3.2"services:xss:image: registry.cn-hangzhou.aliyuncs.com/n1book/web-xss:latestports:- 3000:3000启动方式 docker-compose up -…...

编程日记 2023/2/25 7:00:32

行锁、表锁、主键外键、表之间的关联关系

Java知识点总结&#xff1a;想看的可以从这里进入 目录2.4、行锁、表锁2.5、主键、外键2.5.1、主键2.5.2、外键2.6、表的关联关系2.4、行锁、表锁 MyISAM默认采用表级锁&#xff0c;InnoDB默认采用行级锁。 表锁&#xff1a;开销小&#xff0c;加锁快&#xff0c;不会出现死锁…...

编程日记 2023/2/25 6:59:21

JavaScript 进阶(面试必备)--charater4

文章目录前言一、深浅拷贝:one: 浅拷贝:two:深拷贝二、异常处理:one: throw 抛异常:two: try /catch 捕获异常:three:debugger三、处理thisthis指向 :one:普通函数this指向this指向 :two: 箭头函数this指向3.2 改变this:one: call():two: apply():three: bind()四、性能优化:on…...

编程日记 2023/4/1 3:55:28

ARM+FPGA架构开发板PCIE2SCREEN示例分析与测试-米尔MYD-JX8MMA7

本篇测评由电子发烧友的优秀测评者“zealsoft”提供。 本次测试内容为米尔MYD-JX8MMA7开发板其ARM端的测试例程pcie2screen并介绍一下FPGA端程序的修改。 ​ 01. 测试例程pcie2screen 例程pcie2screen是配合MYD-JX8MMA7开发板所带的MYIR_PCIE_5T_CMOS 工程的测试例&#…...

编程日记 2023/3/21 11:48:18

51单片机入门 - SDCC / Keil_C51 会让没有调用的函数参与编译吗？

Small Device C Compiler&#xff08;SDCC&#xff09;是一款免费 C 编译器&#xff0c;适用于 8 位微控制器。 不想看测试过程的话可以直接划到最下面看结论&#xff1a;&#xff09; 关于软硬件环境的信息&#xff1a; Windows 10STC89C52RCSDCC &#xff08;构建HEX文件&…...

编程日记 2023/2/25 6:55:56

OpenCV只含基本图像模块编译

编译OpenCV4.5.5只含基本图像模块&#xff0c;环境为Windows10 x64CMake3.23.3VS2019。默认编译选项编译得到的OpenCV库往往大几百MB甚至上GB&#xff0c;本文配置下编译得到的库压缩后得到的zip包大小仅6.25MB&#xff0c;适合使用OpenCV基本图像功能模块的项目移植而不牵涉其…...

编程日记 2023/4/1 3:57:53

Java实现阴历日历表（附带星座）

准备工作 1.无敌外挂(GitHub直达源码) Nobb 直击灵魂 https://github.com/xuyishanBD/Java_create_calendar.git2.maven配置(如果没有走上面的捷径) <dependencies><dependency><groupId>net.sourceforge.javacsv</groupId><artifactId>javac…...

编程日记 2023/4/1 3:57:53

Python入门之最基础

Python入门之最基础 IDLE有两种模式&#xff0c;一种是交互模式&#xff0c;通俗讲就是写一个代码&#xff0c;会得到相应的反馈&#xff0c;另一种为编辑模式. 注意事项&#xff1a; 标点符号一定要用英文符号 要注意缩进 dir(builtins)可以看到python所有的内置函数&#…...

编程日记 2023/4/1 3:59:42

浏览器缓存策略

先走强缓存&#xff0c;再走协商缓存 强缓存 不发送请求&#xff0c;直接使用缓存的内容 状态码200 当前会话没有关闭的话就是走memory cache&#xff0c;否则就是disk cache 由响应头的 Pragma&#xff08;逐渐废弃&#xff0c;优先级最高&#xff09;&#xff0c;catch-…...

编程日记 2023/2/25 6:51:27

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/12/12 3:35:27

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2025/12/14 20:50:48

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/9 21:22:39

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/12/15 4:20:03

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2025/11/13 13:42:14

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/12/15 11:01:10

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/11/25 4:59:47

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

编程新知 2025/10/31 5:18:02