高德地图+HTML+点击事件+自定心信息窗体
代码如下
<!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" /><style>html,body,#container {height: 100%;width: 100%;}.content-window-card {position: relative;box-shadow: none;bottom: 0;left: 0;/* width: auto; */width: 28rem;padding: 0;}.content-window-card p {height: 2rem;}.custom-info {border: solid 1px silver;}div.info-top {position: relative;background: none repeat scroll 0 0 #F9F9F9;border-bottom: 1px solid #CCC;border-radius: 5px 5px 0 0;}div.info-top div {display: inline-block;color: #333333;font-size: 14px;font-weight: bold;line-height: 31px;padding: 0 10px;}div.info-top img {position: absolute;top: 10px;right: 10px;transition-duration: 0.25s;}div.info-top img:hover {box-shadow: 0px 0px 5px #000;}div.info-middle {font-size: 12px;padding: 10px 6px;line-height: 20px;}div.info-bottom {height: 0px;width: 100%;clear: both;text-align: center;}div.info-bottom img {position: relative;z-index: 104;}span {margin-left: 5px;font-size: 11px;}.info-middle img {float: left;margin-right: 6px;}.info-span {/* margin-left: 35px; */font-size: 11px;}.info-div {width: 140px;display: inline-block;margin-left: 10px;}.info-img {width: 40px;height: 40px;}.info-a-title {/* color: #000000; */font-size: 16px;}</style></head><body><div id="container"></div><div class="info">点击地图上的点标记，打开所添加的自定义信息窗体</div><script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德key"></script><script type="text/javascript">var devInfo = nullvar map = createMap() //1.new 一个map对象map.clearMap(); //2.清空MapaddMarker() //3.创建点标记//1创建map对象，function createMap() {//1.地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体var mapData = new AMap.Map("container", {resizeEnable: true,center: [115.064965,35.383416], //地图展示中心点位置zoom: 16,mapStyle: 'amap://styles/grey' // 设置地图样式为深色模式});return mapData}//2添加点标记function addMarker() {var markerData = [{title: '1号厂区',icon: "img/gc1.png", //点标记图片路径position: [115.065955,35.383416],offset: new AMap.Pixel(-8, -30)}, {title: '2号厂区',icon: "img/gc2.png", //点标记图片路径position: [115.067945,35.383416],offset: new AMap.Pixel(-3, -30)}, {title: '3号厂区',icon: "img/gc3.png", //点标记图片路径position: [115.068935,35.383416],offset: new AMap.Pixel(-12, -30)}]var arr = []markerData.forEach((item) => {var marker = new AMap.Marker({icon: item.icon, //点标记图片路径position: item.position, //位置offset: item.offset //偏移});arr.push(Object.assign(item, {mapId: marker._amap_id}))marker.setMap(map);// 鼠标点击marker弹出自定义的信息窗体AMap.event.addListener(marker, 'click', function(e) {markerClick(arr, marker)});// 添加闪烁特效// setInterval(function() {// if (marker.getAnimation() === 'AMAP_ANIMATION_NONE') {// marker.setAnimation('AMAP_ANIMATION_BOUNCE');// } else {// marker.setAnimation('AMAP_ANIMATION_NONE');// }// }, 1000);setInterval(function() {if (marker.getAnimation() === 'AMAP_ANIMATION_NONE') {marker.setAnimation('AMAP_ANIMATION_BOUNCE'); // 更换为下落动画效果} else {marker.setAnimation('AMAP_ANIMATION_NONE');}}, 1000);})}//点击标记 获取所点击标记的信息以及窗体要展示的数据，创建信息窗体function markerClick(arr, marker) {var arrNew = arr.filter(x => x.mapId == marker._amap_id)devInfo = arrNew && arrNew[0]var infoWindow = createInfoWindow()openInfoWindow(infoWindow, marker)}//构建自定义窗体function createInfoWindow() {var infoWindowData = new AMap.InfoWindow({isCustom: true, //使用自定义窗体content: getContent(),offset: new AMap.Pixel(16, -45)});return infoWindowData}//处理窗体内容function getContent() {var content = `<div class="custom-info input-card content-window-card"><div class="info-top"><div><span>${devInfo.title}</span><span style="font-size:11px; margin-left:20px;color:#F00;">状态：正在运行</span></div><imgonclick="closeInfoWindow" src="https://webapi.amap.com/images/close2.gif"></div><div class="info-middle" style="background-color: white;"><img class="info-img" src="img/dev.png"><aclass="info-a-title"href="https://ditu.amap.com/detail/B000A8URXB?citycode=110105">XXXXXXXXXXX</a><br>地址：XXXXXXXXXXXXXXXXXXXXXXX<br><div class="info-div">总用电：5428542° </div><span class="info-span"> 总用气：454575NM<br><div class="info-div">发酵罐：210个 </div><span class="info-span"> 总用水量：19999111T</span><br><div class="info-div">工作年限：10年</div> <span class="info-span"> 总产量：27784T</span><br><div class="info-div">建厂时间：2011.09.08</div> <span class="info-span">建筑面积：1200M3</span></span></div><div class="info-bottom" style="position: relative; top: 0px; margin: 0px auto;"><imgsrc="https://webapi.amap.com/images/sharp.png"></div></div>`return content}//打开窗体function openInfoWindow(infoWindow, marker) {debuggerinfoWindow.open(map, marker.getPosition());}//关闭窗体function closeInfoWindow() {map.clearInfoWindow();}</script></body>
</html>
相关文章：
高德地图+HTML+点击事件+自定心信息窗体
代码如下 <!doctype html> <html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"initial-scale1.0, user-scalableno, width…...
流畅的python-学习笔记_协议+继承优缺点
接口和协议 python动态语言，没有interface等概念，接口和协议方法有的也有替代品，所以类似于鸭子类型，只关注行为像鸭子，不关注它是不是鸭子。不是每个接口都得实现，这是允许的 猴子补丁 可动态给对象添加…...
哪个文件加密软件好？迅软加密软件特性解析
哪个文件加密软件好？ 这里推荐一款好用的文件加密软件，迅软DSE加密软件，有17年的加密经验了，已为三十万企业解决信息安全问题。简单易用，兼容性强，各类型文件都可加密。完善的售后保障，各地有服…...
Ubuntu 根目录扩容
环境 物理机：MacBook Air M2 Sonoma 14.4.1 虚拟机：VMware Fusion Player 13.5.0 镜像：Jammy Desktop ARM64 步骤 删除所有快照，关闭镜像，在 vm 上找到该镜像的硬盘设置，进行扩容； 开启镜像&am…...
人证比对API接口如何对接
人证比对API接口全称叫人脸身份证比对API接口也叫人脸实名认证API接口、实人认证API接口，指的是输入姓名、身份证号码和头像照片，与公安库身份证头像进行权威比对，返回比较结果。那么人脸身份证比对API接口该如何对接呢？ 首先我们…...
NIO（非阻塞I/O）和IO（阻塞I/O）详解
文章目录 一、NIO（Non-blocking I/O，非阻塞I/O）1、Channel（通道）2、Buffer（缓冲区）1、ByteBuffer 读取文件2、ByteBuffer 的常用方法2、ByteBuffer 的结构详解3、ByteBuffer 与字符串互转4、Sca…...
【网络】传输层的特点总结
1传输层协议 传输层主要有两个常见的协议：TCP（传输控制协议）和UDP（用户数据报协议）。TCP 提供可靠的、面向连接的通信服务，适用于对数据传输可靠性要求高的场景，如网页浏览、文件传输等。而 UD…...
Scala 多版本下载指南
Scala，这一功能丰富的编程语言，结合了面向对象和函数式编程的精华，为开发者提供了强大的工具来构建高效、可扩展的应用程序。随着Scala社区的不断壮大和技术的演进，多个版本的Scala被广泛应用于不同的项目与场景中。本文旨在为您提…...
已经安装tensorflow，仍报错No module named ‘tensorflow‘
在安装某些python虚拟环境的教程文章中，经常看到有评论区说安装了但是调用显示无模块，例如pytorch和tensorflow等等。 其实跟之前我写过的一篇文章解决方法类似，就是python项目中需要应用哪个虚拟环境，这个项目的python解释器就选…...
五一 作业
#include <iostream>using namespace std; class Num { private:int a; public:Num() {}Num(int a):a(a){}//设置a的值void set(int a){this->aa;}//1-a的和void Sum(){if(a<1){cout<<"a<1"<<endl;return;}int sum0;for(int i1;i<a;i)…...
TesseractOCR安装及使用
1. 基本概念 1.1 Tesseract Tesseract 是一款基于 C 语言开发并开源的光学识别工具，提供底层的文字识别能力。 1.2 Tess4J Tess4J 是对 Tesseract OCR API 的 Java 封装，有了 Tess4J 之后 Java 就可以直接调用本地安装的 Tesseract 进行文字识别。 …...
npm安装指定版本，npm删除依赖，卸载依赖
安装指定版本 npm中安装指定的版本号，格式为 ‘包名版本号’ npm install 包名称版本号 --save 例如安装jquery: npm install jquery3.0.0 --save在package.json里面可以看到对应的包： "jquery": "^3.0.0"注意：已有…...
从代码到洞察：使用API接口深入分析商品详情数据
在电子商务的世界中，商品详情数据是企业做出明智决策的基石。API（应用程序编程接口）提供了一种强大的方式来获取这些数据，不仅可以简化数据获取过程，还可以为深入分析和业务洞察提供丰富的信息。本文将探讨如何使用API…...
数字旅游以科技创新为核心：推动旅游服务的智能化、精准化、个性化，为游客提供更加贴心、专业、高效的旅游服务
目录 一、引言 二、数字旅游以科技创新推动旅游服务智能化 1、智能化技术的应用 2、提升旅游服务的效率和质量 三、数字旅游以科技创新推动旅游服务精准化 1、精准化需求的识别与满足 2、精准化营销与推广 四、数字旅游以科技创新推动旅游服务个性化 1、个性化服务的创…...
HTTP深度指南：协议结构、请求方法与状态码
详解HTTP HTTP教程HTTP消息结构HTTP状态码HTTP和HTTPS HTTP教程 HTTP（超文本传输协议，HyperText Transfer Protocol）是一种用于分布式、协作式、超媒体信息系统的应用层协议。* HTTP是一个基于TCP/IP通信协议来传递数据的（HTML文…...
负载或反向代理服务器如何配置XFF以获取终端真实IP
文章目录 XFF介绍工作原理注意事项 配置方式1. Nginx2. HAProxy3. F5 BIG-IP4. Radware注意事项 本文介绍如何在反向代理或负载中配置XFF，方便后端服务获取请求来源的真实IP XFF介绍 X-Forwarded-For（简称XFF）是一个非标准的HTTP头部字段&a…...
Satellite Communications Symposium(WCSP2022)
1.Power Allocation for NOMA-Assisted Integrated Satellite-Aerial-Terrestrial Networks with Practical Constraints(具有实际约束的 NOMA 辅助天地一体化网络的功率分配) 摘要：天地一体化网络和非正交多址接入被认为是下一代网络的关键组成部分，为…...
docker学习笔记5：Docker Compose安装与使用
Docker Compose 简介 Docker Compose 是一个用于定义和运行多容器 Docker 应用程序的工具。它使用一个 YAML 文件来配置应用服务，这样可以通过一个简单的命令创建和启动所有服务。Docker Compose 主要面向开发环境、自动化测试环境和小型生产部署。 Docker Compose 的主要特…...
遇到螺纹连接过程中的软连接，怎么办？——SunTorque智能扭矩系统
智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 在螺纹连接过程中遇到软连接时，首先需要明确软连接的概念及其特点。软连接通常指的是在螺栓拧紧过程中，由于紧固件与被连接件之间的材料、表面状况或装配工艺等因素，导致拧紧力矩不能…...
Baidu Comate——AI时代的软件开发利器
目录 Comate产品介绍 1.产品背景 编辑 2.产品优势 3.产品特性 4. 支持开发环境及语言 5.使用场景 Comate产品体验 Comate场景应用 2.快捷键的使用 专业插件体验 1.行间注释 2. 代码优化 3.解释说明代码 4.调优建议 5.AutoWork Comate实测体验感受 Comate产品介绍…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
cf2117E
原题链接：https://codeforces.com/contest/2117/problem/E 题目背景： 给定两个数组a,b，可以执行多次以下操作：选择 i (1 < i < n - 1)，并设置 或，也可以在执行上述操作前执行一次删除任意 和 。求…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
大数据学习（132）-HIve数据分析
🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言Ǵ…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
佰力博科技与您探讨热释电测量的几种方法
热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...