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

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

news 2026/2/9 13:41:18

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

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/10/3 0:42:17

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2026/1/31 12:30:32

【安全篇】金刚不坏之身：整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

编程新知 2025/12/7 16:12:52

数据库正常，但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...

编程新知 2026/1/1 2:56:38

Xcode 16 集成 cocoapods 报错

基于 Xcode 16 新建工程项目&#xff0c;集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...

编程新知 2026/2/1 16:17:30