高德地图+HTML+点击事件+自定心信息窗体

2024-05-01 06:04
文章标签 html 事件 信息 地图 点击 frontend 窗体 高德 定心

本文主要是介绍高德地图+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+点击事件+自定心信息窗体的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/950881。

相关文章

HorizontalScrollView实现Gallery效果，可滑到最后项且点击可滑动到相应位置

HorizontalScrollView实现Gallery效果，可滑到最后项且点击可滑动到相应位置

需求 实际开发中，往往需要用到图集展示（Gallery）效果。做过android开发的都知道android有个控件叫Gallery，就是专门用来实现图集展示效果的。使用方法也很简单，一个item布局+一个adapter就可以搞定。 然而Google官方由于某些原因决定弃用Gallery控件（具体原因不明，似乎是因为使用Gallery容易造成内存泄露），官方文档中提倡大家使用ViewPage
阅读更多...
Vue3新特性指南:探索新增指令、内置组件和改进

Vue3新特性指南:探索新增指令、内置组件和改进

Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。本文将介绍Vue3新增的指令、内置组件以及其他值得关注的改进,并提供使用组合式API的用法示例。 一、新增指令 v-is指令: v-is指令用于动态组件,可以根据表达式的值来渲染不同的组件。 用法: <component :is="componentName"><
阅读更多...
手把手教学部署前端项目到nginx

手把手教学部署前端项目到nginx

1.下载nginx 说明：下载11.20.2版本的nginx。   2.配置nginx 说明：找到conf目录下的nginx.conf文件。 2.1代理静态资源 说明：服务器块监听的端口为8089，意味着Nginx将在8089端口上接收和处理HTTP请求。root后面的值相当于html文件夹里面的dist文件夹。index的属性值是设置默认打开文档。 server {lis
阅读更多...
湘潭大学信息与网络安全复习笔记2（总览）

湘潭大学信息与网络安全复习笔记2（总览）

前面的实验和作业反正已经结束了，现在就是集中火力把剩下的内容复习一遍，这一篇博客的内容主要是参考教学大纲和教学日历 文章目录 教学日历教学大纲 教学日历 总共 12 次课，第一次课是概述，第二次和第三次课是密码学基础，第四次课是对称密码，第五次课到第七次课非对称密码，第八次课第九次课哈希函数，第十次课访问控制，第十一次课协议，十二次课量子密码 非对称密码是绝对的重点 教学
阅读更多...
Web前端设计毕业论文：深度探索与未来展望

Web前端设计毕业论文：深度探索与未来展望

Web前端设计毕业论文：深度探索与未来展望 在数字化时代，Web前端设计作为互联网应用的重要组成部分，其重要性和复杂性日益凸显。本论文旨在深度探索Web前端设计的关键要素、发展趋势以及面临的挑战，为未来的研究和实践提供有价值的参考。 四个方面：Web前端设计的核心要素 Web前端设计的核心要素涵盖了多个方面。首先，用户体验是前端设计的关键，包括界面布局、交互设计以及响应速度等，直接影响着用户
阅读更多...
vue3：实现图片放大浏览功能组件

vue3：实现图片放大浏览功能组件

两种实现方式： 1.将原本的盒子与img标签放大至全屏浏览。 2.新建一个div和img标签进行全屏浏览。这样不会改变布局。 第一种： 效果： 组件代码： <template><div :class="isScreen ? 'fullImg' : 'norImg'"><img:src="props.src"alt="img":width="isScreen ? 'auto' : p
阅读更多...
jquery 设置元素相对于另一个元素的top值(实例代码)

jquery 设置元素相对于另一个元素的top值(实例代码)

在jquery中offset().top是相对于body来说的，另外在设置top值的时候要找到与该元素最近的有相对值的元素 <div id="span1">sfdsfsddfsdf</div> <span id="span2" style="position:relative">         <input id="input" type="text"></input>
阅读更多...
使用PHP curl模拟浏览器抓取网站信息

使用PHP curl模拟浏览器抓取网站信息

curl是一个利用URL语法在命令行方式下工作的文件传输工具。curl是一个利用URL语法在命令行方式下工作的文件传输工具。 官方解释 curl是一个利用URL语法在命令行方式下工作的文件传输工具。curl是一个利用URL语法在命令行方式下工作的文件传输工具。 它支持很多协议：FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及
阅读更多...
前端如何接收SSE流式数据传输（大模型网站常用）

前端如何接收SSE流式数据传输（大模型网站常用）

使用fetchEventSource 参考：https://blog.csdn.net/qq_43750656/article/details/1315911984 https://zhuanlan.zhihu.com/p/686618062 首先安装： npm install --save @microsoft/fetch-event-source 我参考各个资料写的函数： // 流式
阅读更多...
Jquery ajaxStart()与ajaxStop()方法(实例讲解)

Jquery ajaxStart()与ajaxStop()方法(实例讲解)

本篇文章主要是对Jquery中的ajaxStart()与ajaxStop()方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助 jQuery中通过ajaxStart()和ajaxStop()两个方法提供了类似的功能。当一个Ajax请求启动时，并且没有其他未完成的Ajax请求时，将调用ajaxStart()方法。同样，ajaxStop()方法则是在所有Ajax请求都完成时调用。这些
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2