高德地图-聚合点效果-遮罩层弹框
2024-06-27 21:58:06
项目需求：
1 根据左侧类型是否勾选，在地图上动态呈现该类型的图标数据；
2 点击每个marker点坐标弹出相对应信息数据；
备注：由于类型较多，单个类型数据量较多，采用聚合点效果，根据是否选中，动态在地图里进行追加marker点图标；
一： 引入
二： 定义全局对象
聚合点对象
var juheAll = {clusterHjd:[];
}
marker点数据
var markerAll = {jyzhan:[];
}
三： 拿到将要遍历的数据
var list = [{lng:'',lat:'',name:''},{},{}];
四： 点击左侧check框，判断是否选中
function selectCheck(arr,type){if(type == "救援站"){arr.checked?fireStart(true):fireStart(false)}
}
五： 运行遍历方法
fucntion fireStart(type){//根据type判断是勾选还是取消勾选if(type){//清空markerAll对象中存储的marker点数据、聚合点数据markerAll.jyzhan = [];juheAll.clusterHjd = [];let title = "救援站信息";let xfData = list;if(xfData.length>0){xfData.forEach(item => {if(!item.lng || !item.lat){ return }//如果经纬度错误则停止（不严谨，此处可以再进行优化）//定义数据let contentHTML = {};contentHTML.name = item.name;.....let marker = new AMap.Marker({map: map,position: [contentHTML.lng, contentHTML.lat],icon: new AMap.Icon({image: '', imageSize: new AMap.Size(30, 30)}),offset: new AMap.Pixel(-15,-15)});//追加到markerAll对象数组中markerAll.jyzhan.push(marker);//鼠标点击marker弹出自定义的信息窗体AMap.event.addListener(marker, 'click', function () {infoWindow.open(map, marker.getPosition());});let infoWindow = new AMap.InfoWindow({isCustom: true,content: createInfoWindow(title, contentHTML),offset: new AMap.Pixel(16, -15)});//构建自定义窗体function createInfoWindow(title, content) {let inf = document.createElement("div");inf.className = "amap-icon1"//头部var head = document.createElement("div");head.className = "amap-icon-head";head.innerHTML = title;inf.appendChild(head);//身体var body = document.createElement("div");body.className = "amap-icon-body";var span0 = document.createElement("span"); //类型var span1 = document.createElement("span"); //所属街道var span2 = document.createElement("span"); //所属大队var span3 = document.createElement("span"); //中队名称var span4 = document.createElement("span"); //防火员 防火员电话var span5 = document.createElement("span"); //负责人 负责人电话var span6 = document.createElement("span"); //中队地址span1.innerHTML = '所属街道：' + content.streetName;span2.innerHTML = '所属大队：' + content.ddname;span3.innerHTML = '名称：' + content.name;span4.innerHTML = '防火员：' + content.firemanId + ' ' + content.firemanPhone;span5.innerHTML = '负责人：' + content.zgName + ' ' + content.zgPhone;span6.innerHTML = '地址：' + content.address;body.appendChild(span1)body.appendChild(span2)body.appendChild(span3)body.appendChild(span4)body.appendChild(span5)body.appendChild(span6)inf.appendChild(body);//尾部var bottom = document.createElement("div");var bottom_content = document.createElement("div");var bottom_button = document.createElement("input");bottom.className = "amap-icon2";bottom_content.className = "amap-icon-buttom";bottom_button.className = "btn-background";bottom_button.type = "button";bottom_button.value = "关闭";bottom_button.onclick = closeInfoWindow;bottom_content.appendChild(bottom_button);bottom.appendChild(bottom_content);inf.appendChild(bottom);var sharp = document.createElement("img");sharp.src = "https://webapi.amap.com/images/sharp.png";sharp.style.float = 'left';sharp.style.position = 'relative';sharp.style.left = '230px';sharp.style.height = '23px';inf.appendChild(sharp);return inf;}})//聚合样式var count = markerAll.jyzhan.length;var _renderClusterMarker = function (context) {var factor = Math.pow(context.count / count, 1 / 18);var div = document.createElement('div');var Hue = 180 - factor * 180;var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';var fontColor = 'hsla(' + Hue + ',100%,20%,1)';var borderColor = 'hsla(' + Hue + ',100%,40%,1)';var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';div.style.backgroundColor = bgColor;var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);div.style.width = div.style.height = size + 'px';div.style.border = 'solid 1px ' + borderColor;div.style.borderRadius = size / 2 + 'px';div.style.boxShadow = '0 0 1px ' + shadowColor;div.innerHTML = context.count;div.style.lineHeight = size + 'px';div.style.color = fontColor;div.style.fontSize = '14px';div.style.textAlign = 'center';context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));context.marker.setContent(div)};var sts = [{url: "https://a.amap.com/jsapi_demos/static/images/blue.png",size: new AMap.Size(32, 32),offset: new AMap.Pixel(-16, -16)}, {url: "https://a.amap.com/jsapi_demos/static/images/green.png",size: new AMap.Size(32, 32),offset: new AMap.Pixel(-16, -16)}, {url: "https://a.amap.com/jsapi_demos/static/images/orange.png",size: new AMap.Size(36, 36),offset: new AMap.Pixel(-18, -18)}, {url: "https://a.amap.com/jsapi_demos/static/images/red.png",size: new AMap.Size(48, 48),offset: new AMap.Pixel(-24, -24)}, {url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",size: new AMap.Size(48, 48),offset: new AMap.Pixel(-24, -24)}];juhe.clusterHjd= new AMap.MarkerClusterer(map, markerAll.jyzhan, {styles: sts,gridSize: 80});}}else{map.remove(markerAll.jyzhan);juhe.clusterHjd.clearMarkers()}
}
高德地图-聚合点效果-遮罩层弹框相关推荐
- 微信小程序实现遮罩层( 弹框 / 浮层 )
这个浮层可以达到的效果如下: 浮层弹出时 , 浮层下的页面不可以滑动; 点击对话框以外的区域 , 对话框消失; 点击对话框内的区域 , 浮层不消失; 效果图: 代码如下: wxml文件 <vie ...
- android仿高德地图首页,Android BottomSheet 的使用（仿高德地图的列表效果）
最近项目中突然要实现高德地图中列表的效果,刚开始一筹莫展,以为是自定义控件还是通过手势进行判断 ,果断蒙了,百度谷歌了一下最后发现原来谷歌早就就出来了这样的效果--android.support.de ...
- 高德地图绘制标记点，点击弹出弹框进入第三方地图软件
需求:根据经纬度绘制标记点,点击标记点弹出弹框和底部按钮,点击顶部弹框进入二级界面,点击底部按钮弹出第三方地图软件选择页,实现跨进程跳转. 效果图: 项目是公司项目,只放出重要部分代码. final ...
- 高德地图聚合点，增加所有点击标记，点击后展示该聚合点下所有信息
高德地图聚合点,增加所有点击标记,点击后展示该聚合点下所有信息 使用高德地图 图片 下面是部分代码,如有不懂,留言 结束 使用高德地图 *1.首先去注册https://lbs.amap.com/api ...
- 高德地图实现地图打点，点击后展示小弹框
高德地图实现地图打点,点击后展示小弹框 准备工作 下载AMapLoader "@amap/amap-jsapi-loader": "^1.0.1", 创建高德地 ...
- 自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...
- 高德地图聚合android,GitHub - lingyanluoxue/android-togetherMap: 实现高德地图的marker聚合功能...
android-togetherMap 本文我将讲解一下我最近实现的高德地图Marker的聚合功能.在项目开发中需要使用到地图Marker的聚合功能,但是高德地图并没有实现对Marker的聚合功能,所 ...
- 安卓高德地图聚合点击事件_滴滴接入第三方平台服务商，试水聚合，又是一场新的运力争夺？...
文| AI财经社 王妍 编辑| 张硕 [本文由AI财经社原创出品,未经许可,任何渠道.平台请勿转载.违者必究.] 继高德地图.百度地图.美团之后,聚合模式的出行新战场,又迎来了大玩家. AI财经社了解 ...
- 高德地图聚合点删除_高德地图 点聚合功能（Adnroid）
1.需求: 接下来的项目要实现像链家APP中地图看房的功能(效果如下图). 链家APP地图找房效果 2.实现思路.查阅资料 看到这个效果图,首先想到的是在view上放一个marker,但是marker ...
最新文章
- LeetCode Course Schedule(有向图中是否存在环)
- Python必备知识点：对Json的基本使用方法
- .net3.5下使用LINQ递归算法实现简洁代码
- 零售连锁管理软件_连锁超市用哪个收银软件好？
- 复制Java文件打印流改进版
- 大文件分片上传前端框架_基于Node.js的大文件分片上传
- android beta项目官方页面,安卓7.0开发者预览版如何安装?Android Beta项目正式上线...
- 简述导线平差计算的五个步骤_RTK技术导线测量和全站仪导线测量有什么区别？...
- 微型计算机釆用,计算机硬件选择题及答案.docx
- rk3399_android7.1添加个驱动且加上宏控编译
- React常用的命令解析
- Python 装逼手机号码方法 低配版 map方法解析
- JAVA实现飞机大战详解
- 鱼类放流标记 PIT鱼类无线射频标记设备|读卡器
- 如何选择安全可靠的即时通讯软件
- 模数转换（A/D）与数模转换（D/A）
- 微信H5如何直接关注公众号
- 笨小孩投资理财-价值投资该看的书籍
- 如何用Stm32读取NPN型颜色传感器
- UE4的JSON读写方式二