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

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

news 2026/2/9 12:03:11

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

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

HTTrack

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

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

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

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

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

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

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

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

微信支付开发避坑指南

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

编程日记 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.发展史摩尔定律：集成电路上可以容纳的晶体管数目在大约每经过18个月到24个月便会增加一倍 2.操作系统组成存储程序程序控制五个部分记住： 输入输出功能 I/O 记忆功能访问计算功能计算判断功能判断自我控制功能自我控制…...

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

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

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

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

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

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

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

P2343 宝石管理系统

不会写平衡树怎么办，可以用STL的vector或者是pb_ds，这个东西太乱，还是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和构造器注入

以上笔记来源： 尚硅谷Spring零基础入门到进阶，一套搞定spring6全套视频教程（源码级讲解）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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

浅谈Unity协程的工作机制

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

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

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

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

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

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

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

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

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...

编程新知 2025/12/25 18:03:56

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。一、I…...

编程新知 2026/2/9 6:43:47

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难，相信大家会学的很愉快，当然对于有后端基础的朋友来说，本期内容更加容易了解，当然没有基础的也别担心，本期内容会详细解释有关内容本期用到的软件：yakit（因为经过之前好多期…...

编程新知 2026/1/21 12:29:04

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看一个默认的页面，gobuster扫一下目录可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到这…...

编程新知 2026/1/29 5:24:50

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2026/1/31 13:18:46

uniapp 字符包含的相关方法

在uniapp中，如果你想检查一个字符串是否包含另一个子字符串，你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的，但它们在处理方式和返回值上有所不同。使用includes()方法 includes()方法用于判断一个字…...

编程新知 2025/9/28 19:00:18

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...

编程新知 2026/1/31 4:40:38

【 java 虚拟机知识第一篇】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍内存模型主要分…...

编程新知 2026/1/31 8:12:12

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

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

一、使用情况

二、功能介绍

三、效果图

四、HTML页面

相关文章：