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

HTML页面配置高德地图，获取位置

news 2025/7/14 15:51:22

HTML页面配置高德地图，获取位置

一、使用情况

1、之前项目用的前后端分离框架，所以用Vue接入的高德地图，自动搜索补全，是请求的后台返回的数据。
2、现在用单体项目，前端是Bootstrap，需要接高德地图，自动搜索补全，直接是前端请求数据，没有通过后台。
3、申请key的方式，可以看之前的文档。此处需要注意，如下图：
在这里插入图片描述

二、功能介绍

1、打开地图，鼠标点击获取经纬度，并标记
2、输入搜索条件，提示对应相关信息，下拉选择
3、点击对应数据，地图跳转该位置，并标记

三、效果图

在这里插入图片描述

四、HTML页面

1、页面代码
注：为了测试，此处安全密钥直接配置在了代码中，其余方式可参考JS API 安全密钥使用

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>鼠标拾取地图坐标</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script><link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/><script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script><style>html,body,#container {width: 100%;height: 100%;}</style>
</head><body>
<div id="container" class="map"></div>
<div id="myPageTop"><table><tr><td><label>请输入关键字：</label></td></tr><tr><td><input id="tipinput"/></td></tr></table>
</div>
<div id="autodiv"></div>
<div class="input-card"><h4>左击获取经纬度：</h4><div class="input-item"><input type="text" readonly="true" id="lnglat"></div>
</div><script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: "对应的安全密钥",};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=自己申请的Web端(JS API)&plugin=AMap.AutoComplete"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript">var marker, map = new AMap.Map("container", {zoom: 11,resizeEnable: true,center: [116.397428, 39.90923], //地图中心点});//输入提示var autoOptions = {input: "tipinput"};AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){var auto = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map});  //构造地点查询类auto.on("select", select);//注册监听，当选中某条记录时会触发function select(e) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name);  //关键字查询查询var latLngArr = [e.poi.location.lng, e.poi.location.lat]//添加标记map.clearMap();marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [e.poi.location.lng, e.poi.location.lat],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);document.getElementById("lnglat").value = e.poi.location.lng + ',' + e.poi.location.lat}});//为地图注册click事件获取鼠标点击出的经纬度坐标map.on('click', function(e) {document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()var latLngArr = [e.lnglat.getLng(), e.lnglat.getLat()]//添加标记map.clearMap();marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [e.lnglat.getLng(), e.lnglat.getLat()],offset: new AMap.Pixel(-13, -30)});marker.setMap(map);map.setCenter(latLngArr);});
</script>
</body>
</html>

一个在学习的开发者，勿喷，欢迎交流

相关文章：

HTML页面配置高德地图，获取位置

HTML页面配置高德地图&#xff0c;获取位置 一、使用情况 1、之前项目用的前后端分离框架&#xff0c;所以用Vue接入的高德地图&#xff0c;自动搜索补全&#xff0c;是请求的后台返回的数据。 2、现在用单体项目&#xff0c;前端是Bootstrap&#xff0c;需要接高德地图&…...

编程日记 2024/9/10 2:36:01

HTTrack

--不破不立 HTTrack 是一个免费开源的网站离线浏览器。通过它可以将整个网站下载到本地的某个目录&#xff0c;包括 html、图片和脚本以及样式文件&#xff0c;并对其中的链接进行重构以便于在本地进行浏览。 1.官网下载地址&#xff1a;https://www.httrack.com/page/2/en/in…...

编程日记 2024/9/10 2:33:59

干货分享|分享一款微软出品的工作效率神器 PowerToys

工具介绍&#xff1a;Microsoft PowerToys 是一组实用工具&#xff0c;可帮助高级用户调整和简化其 Windows 体验&#xff0c;从而提高工作效率。 安装步骤&#xff1a;直接打开微软商店安装即可&#xff0c;并且可以保证下载到最新版本。 功能介绍&#xff1a; 高级粘贴 高级…...

编程日记 2024/9/10 2:32:58

神经网络的线性部分和非线性部分

神经网络的线性部分和非线性部分是其构成中的两个核心元素&#xff0c;它们共同决定了模型的能力和行为。让我们分别看一下这两部分&#xff1a; 1. 线性部分 线性部分通常是指神经网络中的加权和操作。这部分可以用以下形式表示&#xff1a; [ z W \cdot x b ] W 是权重…...

编程日记 2024/9/10 2:31:48

微信支付开发避坑指南

1 微信支付的坑 1.1 不能用前端传递过来的金额 订单的商品金额要从数据库获取&#xff0c;前端只传商品 id。 1.2 交易类型trade type字段不要传错 v2版API&#xff0c;不同交易类型&#xff0c;要调用的支付方式也不同。 1.3 二次签名 下单时&#xff0c;在拿到预支付交…...

编程日记 2024/9/10 2:30:47

Qt5.4.1连接odbc驱动操作达梦数据库

Qt5.4.1连接odbc驱动操作达梦数据库 1 环境介绍2 Qt5.4.1 安装2.1 图形化界面安装Qt5.4.12.2 配置Qt5.4.1 环境变量2.3 Qt5.4.1 生成 libqsqlodbc.so 并配置2.3.1 生成Makefile2.3.2 查看 libqsqlodbc.so 文件并配置 3 配置Qt测试用例4 达梦数据库学习使用列表 1 环境介绍 CPU…...

编程日记 2024/9/10 2:29:45

计算机组成原理（第一课）

计算机系统概述 1.发展史 摩尔定律&#xff1a;集成电路上可以容纳的晶体管数目在大约每经过18个月到24个月便会增加一倍 2.操作系统组成 存储程序程序控制 五个部分记住&#xff1a; 输入输出功能 I/O 记忆功能 访问 计算功能 计算 判断功能 判断 自我控制功能 自我控制…...

编程日记 2024/9/10 2:26:36

计算机网络练级第一级————认识网络

目录 网络搁哪&#xff1f; 网络的发展史&#xff08;了解&#xff09; 独立模式&#xff1a; 网络互联&#xff1a; 局域网时期&#xff1a; 广域网时期&#xff1a; 什么是协议 TCP/IP五层/四层模型 用官话来说&#xff1a; 我自己的话来说 第一层应用层&#xff1…...

编程日记 2024/9/10 2:24:34

Java基于微信小程序的家庭财务管理系统，附源码

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…...

编程日记 2024/9/10 2:23:32

P2343 宝石管理系统

不会写平衡树怎么办&#xff0c;可以用STL的vector或者是pb_ds&#xff0c;这个东西太乱&#xff0c;还是STL好用 #include<bits/stdc.h> using namespace std; int read() {int x 0, f 1;char ch getchar();while (ch < 0 || ch > 9) {if (ch -) f -1;ch g…...

编程日记 2024/9/10 2:20:29

Spring6梳理6——依赖注入之Setter和构造器注入

以上笔记来源&#xff1a; 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09;https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 一、引言 二、Java方法初始化过程 2.1 set方法及构造器方法实现Book对象初始化 三…...

编程日记 2024/9/10 2:19:28

【C++】C++入门基础，详细介绍命名空间，缺省参数，函数重载，引用，内联函数等

目录 1. 命名空间 1.1 使用命名空间的目的 1.2 命名空间定义 1.3 命名空间使用 2. 缺省参数 2.1 缺省参数概念 2.2 缺省参数分类 2.3 实际案例 2.4 注意事项 3. 函数重载 3.1 函数重载概念 3.2 函数重载原理 4. 引用 4.1 引用的概念 4.2 引用的特性 4.3 使用…...

编程日记 2024/9/10 2:18:27

Android使用Room后无法找到字符BR

一般来讲&#xff0c;无法找到BR字符多与Data Binding 相关。 在 Android Studio 中使用 Data Binding 时&#xff0c;如果突然出现 “BR 文件不可用” 或 “找不到符号 BR” 的错误&#xff0c;可能是由以下原因造成的&#xff1a; Data Binding 未启用&#xff1a;确保在你的…...

编程日记 2024/9/10 2:17:25

网络通讯安全基础知识（加密+解密+验签+证书）

1、加密解密基本概念 通讯的加密和解密‌主要涉及将原始信息&#xff08;明文&#xff09;转换为不可直接理解的格式&#xff08;密文&#xff09;&#xff0c;以及将密文还原为原始信息的过程。这一过程通常包括三个基本步骤&#xff1a;加密、传输和解密&#xff0c;其中加密…...

编程日记 2024/9/10 2:16:21

[数据集][目标检测]石油泄漏检测数据集VOC+YOLO格式6633张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;6633 标注数量(xml文件个数)&#xff1a;6633 标注数量(txt文件个数)&#xff1a;6633 标注…...

编程日记 2024/9/10 2:15:19

【Oracle篇】全面理解优化器和SQL语句的解析步骤(含执行计划的详细分析和四种查看方式)（第二篇，总共七篇）

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…...

编程日记 2024/9/10 2:08:49

都2024年了还不明白Redis持久化？RDB文件、AOF文件、AOF重写

都2024年了&#xff0c;不会还有人不知道redis的RDB和Aof吧&#xff1f;不知道没关系&#xff0c;看完这篇文章我相信你就会有个大概的了解和认识了 1. Redis持久化 1.1 持久化概念 Redis本身是一个基于内存的数据库&#xff0c;它提供了RDB持久化、AOF持久化两种方式&#…...

编程日记 2024/9/10 2:02:35

浅谈Unity协程的工作机制

一. 什么是协程 协程概述 在 Unity 中&#xff0c;协程&#xff08;Coroutine&#xff09;是一种非常常用的机制&#xff0c;用于非阻塞地处理需要跨越多个帧、等待某些条件或延迟一段时间才能完成的任务。Unity 的协程通过 C# 的 IEnumerator 和 yield return 实现&#xff0…...

编程日记 2024/9/10 2:00:30

数学建模_数据预处理流程（全）

数据预处理整体流程图 一般数据预处理流程 处理缺失值&#xff1a;填补或删除缺失值。处理异常值&#xff1a;检测并处理异常值。数据编码&#xff1a;将分类变量进行标签编码或独热编码。数据标准化/归一化&#xff1a;对数据进行标准化或归一化处理。连续变量离散化&#xff…...

编程日记 2024/9/10 1:56:26

深入解析Flink SQL：基本概念与高级应用

深入解析Flink SQL&#xff1a;基本概念与高级应用 目录 深入解析Flink SQL&#xff1a;基本概念与高级应用 引言 一、Flink SQL概述 1. Flink SQL的定义 2. Flink SQL与传统SQL的区别 二、Flink SQL的核心特性 1. 事件时间和处理时间 2. 窗口操作 3. 连接和聚合操作 …...

编程日记 2024/9/10 1:55:22

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/13 9:04:17

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/6/21 18:22:44

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2025/7/12 12:01:45

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/7/13 7:24:52

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/7/10 2:40:43

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/7/7 21:48:53

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/7/13 4:15:12