高德地图-聚合点效果-遮罩层弹框
项目需求:
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 ...
最新文章
- 国产AI全面崛起!盘点11款2019年热门国产AI芯片
- 使用links方式安装eclipse插件
- 【译】Introducing scrcpy
- java 调用.net webservice axis2_java利用axis2调用.net写的webservice,传递自定义的实体类参数...
- spring的aop名词解释
- 零基础自学java的难处_零基础自学Java 在学习中要注意哪些问题
- window oracle 只有bak文件怎么恢复_一起来学习Oracle的备份恢复基础吧-4
- java 和_java中的和=是什么意思
- 浏览器兼容性小记-DOM篇(二)
- Android——RelativeLayout(相对布局)
- uva 11732 strcmp() Anyone?
- android ViewFlipper的使用
- java坦克加快速度_Java坦克大战 (三) 之可完全控制坦克朝八个方向运动
- vsmd5错误怎么办_dnf md5文件错误怎么解决,涨知识了
- Provisional headers are shown 解决问题
- 18个最好的代码编辑器/IDE工具
- postman中APIs的使用方法
- 广州大学数据库实验三——数据库系统设计综合实验
- UCOS/UCOSII基础知识
- 什么是赛博朋克? 赛博朋克视觉体系简介