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

html使用天地图写一个地图列表

news 2025/12/19 0:59:23

一、效果图：

点击左侧地址列表，右侧地图跟着改变。
在这里插入图片描述

二、代码实现：

一进入页面时，通过body调用onLoad="onLoad()"函数，确保地图正常显示。

<body onLoad="onLoad()"><!--左侧代码--><div class="addressList"><div class="address_item"onclick="setCenterAndZoom(36.66416, 117.03215,'济南市历下区泉城路世茂广场东座商场三楼E370<br />Red Copper专柜 ')"><div class="name">济南世茂店</div><div class="infobox"><img src="static/imgs/region@2x_1.png" /><div class="infos">济南市历下区泉城路世茂广场东座商场三楼E370<br />Red Copper专柜 </div></div></div><div class="address_item"onclick="setCenterAndZoom(36.66637,117.1969,'济南市历城区经十路与凤鸣路交汇口（融创茂东门）L1层1032<br />Red Copper专柜')"><div class="name">济南融创店</div><div class="infobox"><img src="static/imgs/region@2x_1.png" /><div class="infos">济南市历城区经十路与凤鸣路交汇口（融创茂东门）L1层1032<br />Red Copper专柜</div></div></div><div class="address_item"onclick="setCenterAndZoom(39.9042, 116.4074,'济南市槐荫区经七纬十二路和谐银座七楼<br />Red Copper专柜 ')"><div class="name">济南和谐店</div><div class="infobox"><img src="static/imgs/region@2x_1.png" /><div class="infos">济南市槐荫区经七纬十二路和谐银座七楼<br />Red Copper专柜 </div></div></div>……</div><!--右侧代码--><div class="imgbox" id="map"></div><script type="text/javascript"src="http://api.tianditu.gov.cn/api?v=4.0&tk=此处填写自己申请的key值"></script><script>var map;var zoom = 18;var marker;function onLoad() {//初始化地图对象map = new T.Map("map");//设置显示地图的中心点和级别map.centerAndZoom(new T.LngLat(117.02548, 36.66401), zoom);var lnglat = new T.LngLat(117.02548, 36.66401);//创建信息窗口对象var infoWin = new T.InfoWindow();infoWin.setLngLat(lnglat);//设置信息窗口要显示的内容infoWin.setContent("济南市历下区泉城路世茂广场东座商场三楼E370 Red Copper专柜");//向地图上添加信息窗口map.addOverLay(infoWin);}function setCenterAndZoom(lat, lng, name) {// var lng = document.getElementById("lng").value;// var lat = document.getElementById("lat").value;// var zoom = document.getElementById("zoom").value;map.centerAndZoom(new T.LngLat(lng, lat), zoom);let newMarker = map.getOverlays(); // 获取到了地图上的所有点// console.log(newMarker, 'newMarker');for (let i = 0; i < newMarker.length; i++) {map.removeOverLay(newMarker[i])};var lnglat = new T.LngLat(lng, lat);//创建信息窗口对象var infoWin = new T.InfoWindow();infoWin.setLngLat(lnglat);//设置信息窗口要显示的内容infoWin.setContent(name);//向地图上添加信息窗口map.addOverLay(infoWin);}</script>
</body>

ok~

相关文章：

html使用天地图写一个地图列表

一、效果图&#xff1a; 点击左侧地址列表&#xff0c;右侧地图跟着改变。 二、代码实现&#xff1a; 一进入页面时&#xff0c;通过body调用onLoad"onLoad()"函数&#xff0c;确保地图正常显示。 <body onLoad"onLoad()"><!--左侧代码-->…...

编程日记 2023/11/19 8:22:45

C++ Qt 学习（九）：模型视图代理

1. Qt 模型视图代理 Qt 模型视图代理&#xff0c;也可以称为 MVD 模式 模型(model)、视图(view)、代理(delegate)主要用来显示编辑数据 1.1 模型 模型 (Model) 是视图与原始数据之间的接口 原始数据可以是&#xff1a;数据库的一个数据表、内存中的一个 StringList&#xff…...

编程日记 2023/11/19 8:20:43

wpf devexpress 自定义统计

总计统计和分组统计包含预定义总计函数。这些函数允许你计算如下&#xff1a; 数据列的数量&#xff08;Count&#xff09; 最大和最小值(Max和Min) 总计和平均值&#xff08;Sum和Average&#xff09; 处理GridControl.CustomSummary 事件或者使用 GridControl.CustomSumm…...

编程日记 2023/11/19 8:19:41

【Flink】Flink任务缺失Jobmanager日志的问题排查

Flink任务缺失Jobmanager日志的问题排查 问题不是大问题&#xff0c;不是什么代码级别的高深问题&#xff0c;也没有影响任务运行&#xff0c;纯粹因为人员粗心导致&#xff0c;记录一下排查的过程。 问题描述 一个生产环境的奇怪问题&#xff0c;环境是flink1.15.0 on yarn…...

编程日记 2023/11/19 8:18:40

教程：使用 Keras 优化神经网络

一、介绍 在 我 之前的文章中&#xff0c;我讨论了使用 TensorFlow 实现神经网络。继续有关神经网络库的系列文章&#xff0c;我决定重点介绍 Keras——据说是迄今为止最好的深度学习库。 我 从事深度学习已经有一段时间了&#xff0c;据我所知&#xff0c;处理…...

编程日记 2023/11/19 8:17:39

什么是PWA（Progressive Web App）？它有哪些特点和优势？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…...

编程日记 2023/11/19 8:16:38

深入理解MongoDB的CRUD操作

MongoDB&#xff0c;一个广受欢迎的NoSQL数据库&#xff0c;以其灵活的文档模型、强大的查询能力和易于扩展的特性而著称。对于初学者和经验丰富的开发人员来说&#xff0c;熟练掌握MongoDB的增删改查&#xff08;CRUD&#xff09;操作是至关重要的。本博客将深入探讨如何在Mon…...

编程日记 2023/11/19 8:15:36

使用量子玻尔兹曼机推进机器学习：新范式

一、说明 量子玻尔兹曼机&#xff08;QBM&#xff09;是量子物理学和机器学习的前沿融合。通过利用叠加和纠缠等量子特性的力量&#xff0c;QBM 可以同时探索多个解决方案&#xff0c;使其异常擅长解决复杂问题。它使用量子位&#xff08;量子计算的构建模块&#xff09;以传统…...

编程日记 2023/11/19 8:13:33

优化｜优化求解器自动调参

原文信息&#xff1a;MindOpt Tuner: Boost the Performance of Numerical Software by Automatic Parameter Tuning 作者&#xff1a;王孟昌 &#xff08;达摩院决策智能实验室MindOpt团队成员&#xff09; 一个算法开发者&#xff0c;可能会幻想进入这样的境界&#xff1a;算…...

编程日记 2023/11/19 8:12:30

vite vue3配置eslint和prettier以及sass

准备 教程 安装eslint 官网 vue-eslint ts-eslint 安装eslint yarn add eslint -D生成配置文件 npx eslint --init安装其他插件 yarn add -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin…...

编程日记 2023/11/19 8:11:28

C语言第入门——第十六课

目录 一、分治策略与递归 二、递归 1.求解n的阶乘 2.输入整数、倒序输出 3.输入整数、正序输出 4.计算第n位Fibonacci数列 ​编辑5.无序整数数组打印 6.找到对应数组下标 一、分治策略与递归 在我们遇到大问题的时候&#xff0c;我们的正确做法是将它分解成小问题&a…...

编程日记 2023/11/19 8:10:27

IntelliJ IDEA 快捷键 Windows 版本

前言&#xff1a;常用快捷键 IntelliJ IDEA编辑器大受欢迎的原因之一是它的智能提示和丰富的快捷键&#xff0c;在日常开发中熟练的使用快捷键会大大提升开发的效率&#xff0c;本篇文章就笔者日常开发中的总结&#xff0c;把常用的、好用的快捷键做一个列表&#xff0c;方便…...

编程日记 2023/11/19 8:06:19

重生之我必去大厂java开发

JavaDreamer 重生之我必去大厂java开发。主线任务进入大厂java开发。 author &#xff1a;developer_zxh GitHub | Gitee 本项目记录了本人从中国科学院大学硕士研究生开始&#xff0c;如何进入大工 java 开发岗位的学习记录&#xff08;目前在校未求职&#xff0c;加入后此状…...

编程日记 2023/11/19 8:05:15

2023年中职“网络安全“—Web 渗透测试②

2023年中职“网络安全“—Web 渗透测试② Web 渗透测试任务环境说明&#xff1a;1.访问http://靶机IP/web1/,获取flag值&#xff0c;Flag格式为flag{xxx}&#xff1b;2.访问http://靶机IP/web2/,获取flag值&#xff0c;Flag格式为flag{xxx}&#xff1b;3.访问http://靶机IP/web…...

编程日记 2023/11/19 8:04:14

【整顿C盘】pycharm、chrome等软件，缓存移动

C盘爆了&#xff0c;特来找一下巨大的软件缓存&#xff0c;特此记录&#xff0c;跟随的各大教程&#xff0c;和自己的体会 一、爆炸家族JetBrains 这个适用于pycharm、idea、webstorm等等&#xff0c;只要是JetBrains家的&#xff0c;2020版本以上&#xff0c;都是一样的方法 p…...

编程日记 2023/11/19 8:03:13

C# using语句使用介绍

在C#中&#xff0c;using语句有两种主要用途&#xff1a;一是引入命名空间&#xff0c;二是提供一种简便的方式来处理资源的清理&#xff08;主要用于实现了 IDisposable 接口的对象&#xff09;。 引入命名空间&#xff1a;using 语句用于引入命名空间&#xff0c;从而可以在代…...

编程日记 2023/11/19 8:02:12

leetcode (力扣) 201. 数字范围按位与 (位运算)

文章目录 题目描述思路分析完整代码 题目描述 给你两个整数 left 和 right &#xff0c;表示区间 [left, right] &#xff0c;返回此区间内所有数字 按位与 的结果&#xff08;包含 left 、right 端点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;left 5, right 7 输出…...

编程日记 2023/11/19 8:01:10

Flutter笔记： 在Flutter应用中使用SQLite数据库

Flutter笔记 在Flutter应用中使用SQLite数据库&#xff08;基于sqflite&#xff09; 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/q…...

编程日记 2023/11/19 8:00:09

OpenAI GPT5计划泄露

OpenAI的首席执行官萨姆奥特曼在最近接受《金融时报》的专访时&#xff0c;分享了OpenAI未来发展的一些新动向。此外&#xff0c;他还透露了关于即将到来的GPT-5模型以及公司对AGI的长期目标的一些细节。 奥特曼指出&#xff1a; 1.OpenAI正在开发GPT-5&#xff0c;一种更先进的…...

编程日记 2023/11/19 7:59:07

【面试经典150 | 数学】Pow(x, n)

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;快速幂-递归方法二&#xff1a;快速幂-迭代 其他语言python3 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主…...

编程日记 2023/11/19 7:58:04

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/12/17 20:38:58

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/12/12 7:38:23

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/12/13 16:45:53

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/12/16 5:19:07

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/12/12 13:14:21

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04