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

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

news 2026/4/1 17:00:36

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

告别重复劳动：用快马生成deerflow式工作流，提升开发效率十倍

最近在尝试优化日常开发流程时&#xff0c;发现很多重复性的代码检查工作特别耗时。于是研究了下如何用InsCode(快马)平台快速搭建一个deerflow风格的自动化工具&#xff0c;效果出乎意料的好。这里分享下具体实现思路和体验。 为什么需要自动化工作流 每次提交代码前&#x…...

编程新知 2026/4/1 16:12:38

网页资源下载革新工具：ResourcesSaverExt高效使用指南

网页资源下载革新工具&#xff1a;ResourcesSaverExt高效使用指南 【免费下载链接】ResourcesSaverExt Chrome Extension for one click downloading all resources files and keeping folder structures. 项目地址: https://gitcode.com/gh_mirrors/re/ResourcesSaverExt …...

编程新知 2026/4/1 16:02:33

2027年非全日制国际商务硕士备考规划-暨南大学（珠海研究院）

2027年非全日制国际商务硕士备考规划 一、基本情况与备考总原则 个人时间画像 工作日&#xff1a;19:20到家&#xff0c;19:30-20:00吃饭休息&#xff0c;20:00-23:00为黄金学习时段&#xff08;约2.5-3小时&#xff09;。23:30前入睡&#xff0c;保证7小时睡眠。 周末&#xf…...

编程新知 2026/4/1 15:21:59

从编译错误到版本管理：C语言“商人过河”游戏代码的现代化改造之旅

1. 从古董代码到现代项目&#xff1a;一场技术考古与修复之旅 第一次打开那份"商人过河"的C语言游戏代码时&#xff0c;我仿佛穿越回了二十年前。满屏的编译错误、过时的函数调用、混乱的格式&#xff0c;还有那些早已被现代编译器抛弃的写法。这让我想起刚入行时接手…...

编程新知 2026/4/1 13:26:57

保姆级教程：手把手教你用Zabbix监控MySQL数据库（Percona模板实战）

深度实战&#xff1a;基于Percona模板构建企业级MySQL监控体系 当数据库规模突破百万级QPS时&#xff0c;传统的手动检查方式就像用体温计测量森林大火——既低效又危险。去年某电商大促期间&#xff0c;我们曾因未及时发现连接数耗尽导致核心交易库雪崩&#xff0c;这个教训让…...

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

【实战指南】解决Qt平台插件加载失败：从环境变量到PyQt5重装的完整方案

1. 遇到Qt平台插件加载失败&#xff1f;别慌&#xff0c;先看懂报错信息 最近在Windows上跑labelimg标注工具时&#xff0c;突然弹出一个让人头疼的错误&#xff1a; qt.qpa.plugin: Could not load the Qt platform plugin "windows" in "" even though…...

编程新知 2026/4/1 12:26:15

AudioLDM-S极速音效生成：5分钟搞定游戏音效，小白也能当音效师

AudioLDM-S极速音效生成&#xff1a;5分钟搞定游戏音效&#xff0c;小白也能当音效师 1. 游戏音效制作的新纪元 想象一下这样的场景&#xff1a;你正在开发一款独立游戏&#xff0c;需要一个"科幻飞船引擎启动"的音效。传统方式可能需要花费数小时搜索音效库、购买…...

编程新知 2026/4/1 9:07:23

NVIDIA Profile Inspector实战手册：从参数调试到显卡性能全面优化

NVIDIA Profile Inspector实战手册&#xff1a;从参数调试到显卡性能全面优化 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 在PC硬件优化领域&#xff0c;专业工具与普通用户之间往往存在技术鸿沟。N…...

编程新知 2026/4/1 8:40:55

EasyAnimateV5-7b-zh-InP效果对比：不同Sampling Method（Flow/Euler）画质差异

EasyAnimateV5-7b-zh-InP效果对比&#xff1a;不同Sampling Method&#xff08;Flow/Euler&#xff09;画质差异 你是不是也遇到过这样的困惑&#xff1a;用同一个图生视频模型&#xff0c;同样的图片和提示词&#xff0c;只是换了个采样方法&#xff0c;出来的视频效果就天差…...

编程新知 2026/4/1 7:35:27

别再手动画封装了！用嘉立创EDA免费库5分钟搞定Altium Designer缺失的器件

5分钟极速救援&#xff1a;用嘉立创EDA破解Altium Designer封装缺失难题 深夜11点&#xff0c;李工盯着屏幕上闪烁的光标和半成品的PCB布局图&#xff0c;额头渗出细密的汗珠。项目交付截止前48小时&#xff0c;团队突然发现Altium Designer官方库中缺少关键芯片TPS5430DDAR的封…...

编程新知 2026/4/1 5:10:53