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

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

news 文章来源：https://blog.csdn.net/weixin_48596030/article/details/134462770 2024/9/20 16:57:46

一、效果图：

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

二、代码实现：

一进入页面时，通过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

封装比较好的登录页面

封装比较好的登录页面 只在setup()函数中写流程&#xff0c;将逻辑代码抽离出来 <template><div class"wrapper"><img class"wrapper__img" srchttp://www.dell-lee.com/imgs/vue3/user.png /><div class"wrapper__input"&…...

编程日记 2023/11/19 7:57:02

如何使用Flask request对象处理请求

在 Flask 中&#xff0c;request 对象是处理 HTTP 请求的重要工具之一。它提供了许多属性和方法&#xff0c;可以帮助我们获取请求的相关信息和数据。本文将向你介绍 request 对象的常用方法以及如何在 Flask 应用程序中使用它。 1. 获取请求方法 首先&#xff0c;让我们看一…...

编程日记 2023/11/19 7:56:01

快速搜索多个word、excel等文件中内容

如何快速搜索多个word、excel等文件中内容 操作方法 以win11系统为介绍对象。 首先我们打开“我的电脑”-->“文件夹选项”-->“搜索”标签页,在“搜索内容”下方选择&#xff1a;"始终搜索文件名和内容&#xff08;此过程可能需要几分钟&#xff09;"。然后…...

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

Minio安装

环境 centos8&#xff0c;关闭防火墙 minio-20231101183725版本 参考官网&#xff1a;部署 MinIO&#xff1a;单节点单硬盘 — 适用于 Linux 的 MinIO 对象存储 单例 下载rpm&#xff0c;用中国镜像 wget https://dl.minio.org.cn/server/minio/release/linux-amd64/arch…...

编程日记 2023/11/19 7:53:55

Spring初识

未来的几周时间&#xff0c;大概率我会更新一下Spring家族的一些简单知识。而什么是Spring家族&#xff0c;好多同学还不是很清楚&#xff0c;我先来简单介绍一下吧&#xff1a; 所谓Spring家族&#xff0c;它其实就是一个框架&#xff0c;是基于Servlet再次进行封装的内容。为…...

编程日记 2023/11/19 7:52:53

2023全新付费进群系统源码 带定位完整版 附教程

这源码是我付费花钱买的分享给大家&#xff0c;功能完整。 搭建教程 Nginx1.2 PHP5.6-7.2均可 最好是7.2 第一步上传文件程序到网站根目录解压 第二步导入数据库&#xff08;58soho.cn.sql&#xff09; 第三步修改/config/database.php里面的数据库地址 第四步修改/conf…...

编程日记 2023/11/19 7:51:51

C# LINQ使用介绍

LINQ&#xff08;Language-Integrated Query&#xff09;是C#语言的一个强大特性&#xff0c;它允许开发者用声明性的方式查询和操作数据。LINQ提供了一致的查询体验&#xff0c;无论是操作内存中的对象&#xff08;如数组或集合&#xff09;&#xff0c;还是操作外部数据源&am…...

编程日记 2023/11/19 7:50:50

【c++】——类和对象(中)——实现完整的日期类(优化）万字详细解疑答惑

作者:chlorine 专栏:c专栏 赋值运算符重载()()():实现完整的日期类(上) 我走的很慢&#xff0c;但我从不后退。 【学习目标】 日期(- - --)天数重载运算符 日期-日期 返回天数 对日期类函数进行优化(不符合常理的日期&#xff0c;负数&#xff0c;const成员)c中重载输入cin和输…...

编程日记 2023/11/19 7:49:49

开源与闭源：大模型时代的技术交融与商业平衡

一、开源和闭源的优劣势比较 1.1 开源 优势&#xff1a; 1.技术共享与吸引人才&#xff1a; 开源促进了技术共享&#xff0c;吸引了全球范围内的人才参与大模型的发展&#xff0c;形成了庞大的开发者社区。 2.推动创新&#xff1a; 开源模式鼓励开发者共同参与&#xff0c;推动…...

编程日记 2023/11/19 7:48:48

C#开发的OpenRA游戏之属性BodyOrientation（6）

C#开发的OpenRA游戏之属性BodyOrientation（6） 在顶层定义里会发现这个属性： ^SpriteActor: BodyOrientation: QuantizeFacingsFromSequence: RenderSprites: SpriteActor是用来定义角色的基本属性，它的第一个属性就是BodyOrientation，这个属性主要用来描述角色的身体的…...

编程日记 2023/11/19 7:47:45

Linux shell编程学习笔记27：tputs

除了stty命令&#xff0c;我们还可以使用tput命令来更改终端的参数和功能。 1 tput 命令的功能 tput 命令的主要功能有&#xff1a;移动更改光标、更改文本显示属性&#xff08;如颜色、下划线、粗体&#xff09;&#xff0c;清除屏幕特定区域等。 2 tput 命令格式 tput [选…...

编程日记 2023/11/19 7:46:44

【计算机网络笔记】IPv6简介

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…...

编程日记 2023/11/19 7:45:43

c语言-数据结构-堆

目录 一、二叉树 1、二叉树的概念 2、完全二叉树和满二叉树 3、完全二叉树的顺序存储 二、堆 2、堆的概念与结构 3、堆的创建及初始化 4、堆的插入&#xff08;小堆&#xff09; 5、堆的删除 6、显示堆顶元素 7、显示堆里的元素个数 8、测试堆的各个功能 9、 实现堆…...

编程日记 2023/11/19 7:44:43

ROS基础—关于参数服务器的操作

1、rosparam list 获取参数服务器的所有参数。 2、rosparam get /run_id 获取参数的值...

编程日记 2023/11/19 7:43:42

Sql Server 2017主从配置之：事务日志传送

使用事务日志传送模式搭建Sql Server 2017主从同步&#xff0c;该模式有一定的延迟&#xff0c;是通过3个不同的定时任务&#xff0c;将主库的日志同步到从库进行恢复来实现数据库同步操作。 环境准备 两台服务器&#xff0c;配置都是8g2核&#xff0c;50g硬盘&#xff0c;操…...

编程日记 2023/11/19 7:42:41

每日OJ题_算法_双指针_力扣283. 移动零+力扣1089. 复写零

力扣283. 移动零 283. 移动零 - 力扣&#xff08;LeetCode&#xff09; 难度 简单 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例…...

编程日记 2023/11/19 7:41:39

WebGl-Blender：建模 / 想象成形 / Blender概念词汇表 / 快捷键

一、理解Blender 欢迎来到Blender&#xff01;Blender是一款免费开源的3D创作套件。 使用Blender&#xff0c;您可以创建3D可视化效果&#xff0c;例如建模、静态图像&#xff0c;3D动画&#xff0c;VFX&#xff08;视觉特效&#xff09;快照和视频编辑。它非常适合那些受益于…...

编程日记 2023/11/19 7:40:37

【C++】【Opencv】cv::warpAffine()仿射变换函数详解，实现平移、缩放和旋转等功能

仿射变换是一种二维变换&#xff0c;它可以将一个二维图形映射到另一个二维图形上&#xff0c;保持了图形的“形状”和“大小”不变&#xff0c;但可能会改变图形的方向和位置。仿射变换可以用一个线性变换矩阵来表示&#xff0c;该矩阵包含了六个参数&#xff0c;可以进行平移…...

编程日记 2023/11/19 7:39:36

WPF实现右键菜单

在WPF中&#xff0c;创建上下文菜单&#xff08;通常称为“右键菜单”&#xff09;是通过使用ContextMenu控件来实现的。你可以在XAML中声明上下文菜单&#xff0c;并将其关联到任何FrameworkElement。以下是如何在WPF中实现上下文菜单的基本步骤&#xff1a; 1. 在XAML中定义…...

编程日记 2023/11/19 7:38:36

Java智慧工地SaaS管理平台源码：AI/云计算/物联网

智慧工地是指运用信息化手段&#xff0c;围绕施工过程管理&#xff0c;建立互联协同、智能生产、科学管理的施工项目信息化生态圈&#xff0c;并将此数据在虚拟现实环境下与物联网采集到的工程信息进行数据挖掘分析&#xff0c;提供过程趋势预测及专家预案&#xff0c;实现工程…...

编程日记 2023/11/19 7:37:35

【漏洞复现】通达oa 前台sql注入

漏洞描述 通达OA（Office Automation）是一款企业级协同办公软件，旨在为企业提供高效、便捷、安全、可控的办公环境。它涵盖了企业日常办公所需的各项功能，包括人事管理、财务管理、采购管理、销售管理、库存管理、生产管理、办公自动化等。通达OA支持PC端和移动端使用，可以…...

编程日记 2023/11/19 7:36:34

机器学习笔记 - Ocr识别中的文本检测EAST网络概述

一、文本检测 文本检测简单来说就是找到图像中可以出现文本的区域。例如，请参见下图，其中在检测到的文本周围绘制了绿色边框。 在进行文本检测时，你可能会遇到两种情况 具有结构化文本的图像：这是指具有干净/均匀背景和常规字体的图像。文本大多密集，行结构正确，…...

编程日记 2023/11/19 7:35:32

【SQL server】数据库、数据表的创建

创建数据库 --如果存在就删除 --所有的数据库都存在sys.databases当中 if exists(select * from sys.databases where name DBTEST)drop database DBTEST--创建数据库 else create database DBTEST on --数据文件 (nameDBTEST,--逻辑名称 字符串用单引号filenameD:\DATA\DBT…...

编程日记 2023/11/19 7:34:32

vue的生命周期分别是什么？

Vue的生命周期分为8个阶段&#xff0c;分别是&#xff1a; beforeCreate&#xff1a;实例初始化之后&#xff0c;数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created&#xff1a;实例已经创建完成后被调用&#xff0c;这时候实例已完成以下的配置&#…...

编程日记 2023/11/19 7:33:30

Java拼图游戏

运行出的游戏界面如下&#xff1a; 按住A不松开&#xff0c;显示完整图片&#xff1b;松开A显示随机打乱的图片。 User类 package domain;/*** ClassName: User* Author: Kox* Data: 2023/2/2* Sketch:*/ public class User {private String username;private String password…...

编程日记 2023/11/19 7:31:28

Vue框架的element组件table文字居中

1.直接上代码 <el-table max-height"500px" :data"datas.roles" style"width: 100%" border :header-cell-style"{textAlign: center}" :cell-style"{ textAlign: center }"><el-table-column prop"id" …...

编程日记 2023/11/19 7:30:27

科技创新 共铸典范 | 江西卫健办邓敏、飞图影像董事长洪诗诗一行到访拓世科技集团，提振公共卫生事业发展

2023年11月15日&#xff0c;拓世科技集团总部迎来了江西省卫健项目办项目负责人邓敏、江西飞图影像科技有限公司董事长洪诗诗一行的考察参观&#xff0c;集团董事长李火亮、集团高级副总裁方高强进行热情接待。此次多方交流&#xff0c;旨在共同探讨携手合作&#xff0c;激发科…...

编程日记 2023/11/19 7:29:25

Linux安装OpenCV并配置VSCode环境

Linux安装OpenCV并配置VSCode环境 安装OpenCV环境安装必需工具下载并解压OpenCV库&#xff08;Opencv Core Modules和opencv_contrib&#xff09;创建构建目录&#xff0c;进行构建验证构建结果安装验证安装结果 配置VSCode环境创建项目文件修改配置信息执行程序 安装环境 Ubun…...

编程日记 2023/11/19 7:27:21

Django（ORM事务操作｜ORM常见字段类型｜ORM常见字段参数｜关系字段｜Meta元信息）

文章目录 ORM事务操作什么是事务&#xff1f;事务的产生事务的四大特征ORM中如何使用事务 ORM字段类型常用字段与不常用字段类型ORM还支持用户自定义字段类型 ORM字段参数关系字段ForeignKey外键on_delete参数设置的值 OneToOneField与ForeignKey的区别多对多关系建立的方式ORM…...

编程日记 2023/11/19 7:26:20

【mujoco】Ubuntu20.04配置mujoco210

【mujoco】Ubuntu20.04配置mujoco210 文章目录 【mujoco】Ubuntu20.04配置mujoco2101. 安装mujoco2102. 安装mujoco-py3.使用render时报错Reference 本文简要介绍一下如何在ubuntu20.04系统中配置mujoco210&#xff0c;用于强化学习。 1. 安装mujoco210 在官方资源里找到http…...

编程日记 2023/11/19 7:25:19