百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...
2024-05-10 15:36:19
- 写了一天，以下是我自己摸索出来的，暂时只做了两层地图，废话不多说，上图上代码
图片：
第一层地图
点击圆形覆盖物或者放大地图进入第二层地图，缩放会回到第一层
拖拽地图或者缩放地图会触发可视化数据
下拉滚动条自动加载数据，滑动滚动条到底部自动加载6条
html：(具体不贴出)
<head><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oXteNBUCZuMQssdhi4eZlcGF2pTGSoX5"></script><script src="../js/house/map.js"></script>
</head>
<body><div class="map-container fl" id="container"></div><div class="map-container fl" id="container_two" style="display: none;"></div>
</body>
...
JS：(map.js)
第一层地图（因为第二层地图两种写法，所有拆开写）
注意：
fillColor：不给值表示不填充，这样就不会影响区划里的遮盖物了，也可以给填充色并设置透明度
$(document).ready(function(){var point = new BMap.Point(120.165366,30.286491);...init(json,point);
});var map = "";//第一层
var map2 = "";//第二层
var jsons;/*** 第一层地图* json：后台返回的json数据（楼盘表：楼盘的基本信息和经纬度）* area_json：后台返回的区域数据（区域表：区域的基本信息和经纬度）* 类似以下：* //区域* var area_json = [{id:15,area_name:"杭州",longitude:"120.165366",latitude:"30.286491"},{id:16,area_name:"金华",longitude:"119.627245",latitude:"29.111935"},{id:17,area_name:"宁波",longitude:"121.483073",latitude:"29.828361"}];*/
function init(json,point){jsons = json;// 创建Map实例map = new BMap.Map("container");map.centerAndZoom(point, 10);map.setMinZoom(10);//设置缩放最小级别map.addControl(new BMap.MapTypeControl({//添加控件mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放//遍历区域for (var i in area_json) {cover(area_json[i]);}
}/*** 第一层地图覆盖物* @param obj*/
function cover(obj){var point = new BMap.Point(obj.longitude,obj.latitude);//创建圆形覆盖物var circle = new BMap.Circle(point,20000,{fillColor:"#486090",strokeWeight:1,fillOpacity:0.9,strokeOpacity:0,strokeColor:"#486090"});//获取楼盘数$.post("/house_count" , {id : obj.id} , function(count){if(count == 0){//没有楼盘的区域不显示return;}// 创建文本标注对象var label = new BMap.Label("<p style='text-align:center'>"+obj.area_name+"</p><p style='text-align:center'>"+count+"个楼盘</p>", {position : point,// 指定文本标注所在的地理位置offset : new BMap.Size(-25, -16) //设置文本偏移量}); //设置文本标注属性label.setStyle({color : "#FFF",backgroundColor:'transparent',//文本背景色borderColor:'transparent',//文本框边框色fontSize : "10px",height : "12px",lineHeight : "15px",fontFamily:"微软雅黑"});//行政区域边界function getBoundary(){ var bdary = new BMap.Boundary();bdary.get(obj.area_name, function(rs){ //获取行政区域map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个if (count === 0) {alert('未能获取当前输入行政区域');return ;}var pointArray = [];for (var i = 0; i < count; i++) {//fillColor：不给值表示不填充，这样就不会影响区划里的遮盖物了，也可以给填充色并设置透明度var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, fillColor: '',fillOpacity:0}); //建立多边形覆盖物map.addOverlay(ply); //添加覆盖物pointArray = pointArray.concat(ply.getPath());} map.setViewport(pointArray); //调整视野 }); }label.disableMassClear();//禁止文本标注被覆盖物被map清除map.addOverlay(label);//添加文本到地图容器label.addEventListener("click",function(){//点击文本//隐藏第一张地图document.getElementById("container").style.display="none";//显示第二张图document.getElementById("container_two").style.display="block";map_two(jsons,point);});circle.disableMassClear();//禁止圆形覆盖物被map清除map.addOverlay(circle);//添加圆形覆盖物到地图容器//鼠标进入圆形覆盖物circle.addEventListener("mouseover",function(){circle.setFillColor("#90C030");circle.setStrokeColor("#90C030"); getBoundary();//行政边界});//鼠标离开圆形覆盖物circle.addEventListener("mouseout",function(){circle.setFillColor("#486090");circle.setFillColor("#486090");map.clearOverlays();});//鼠标点击圆形覆盖物circle.addEventListener("click",function(){//隐藏第一张地图document.getElementById("container").style.display="none";//显示第二张图document.getElementById("container_two").style.display="block";map_two(jsons,point);//调用第二张地图方法});});//地图更改缩放级别结束时触发触发此事件map.addEventListener("zoomend",function(){if(map.getZoom() >= 12){document.getElementById("container").style.display="none";document.getElementById("container_two").style.display="block";map_two(jsons,map.getCenter());//开启第二层地图，获取地图中心点经纬度}});
}
第二层地图
第一种：普通的标记和信息窗口覆盖物
缺点：不灵活
遇到的问题：1.进入地图所有标记的信息窗口默认全部打开。2.信息窗口左下角阴影。（我抓包看了一下，阴影在图片里，不好搞）
以上遇到的两个问题鹅厂地图没遇到过，小弟功力尚欠，有大佬解决的下方留言，以下贴出问题图片：
/*** 第二层地图*/
function map_two(json,point_one) {// 创建Map实例map2 = new BMap.Map("container_two");map2.centerAndZoom(point_one, 14);map2.setMinZoom(10);map2.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); map2.enableScrollWheelZoom(true);//开启鼠标滚轮缩放for(var i in json.data){//标记addMarker(json.data[i]);}//创建标注function addMarker(obj){//获取经纬度var point = new BMap.Point(obj.longitude,obj.latitude);//自定义标注var myIcon = new BMap.Icon("../image/biaoji.png", new BMap.Size(25,25),{infoWindowAnchor:new BMap.Size(13,13)});var marker = new BMap.Marker(point,{icon:myIcon});marker.setTitle(obj.title);map2.addOverlay(marker);//文本
// var label = new BMap.Label(obj.title,{offset:new BMap.Size(15,-10)});
// label.setStyle({
// color : "#000000",
// borderColor:"#000000",
// fontSize : "10px",
// height : "20px",
// lineHeight : "15px",
// fontFamily:"微软雅黑"
// });
// marker.setLabel(label);(function() {marker.addEventListener("click",function(){showInfo(this,obj);});})();}//显示信息窗口，显示标注点的信息。function showInfo(thisMaker,obj){var sContent = '<div><p style="font-size:18px;"><strong>'+obj.title+'</strong></p>'+'<p style="color:#9B9B9B">'+obj.property_type+' <nobr style="color:#8CBF1F;font-size:20px;">'+obj.price_rmb+''+'</nobr>元/㎡ <nobr>'+obj.price_bs+'₱/㎡</nobr></p></div>';var infoWindow = new BMap.InfoWindow(sContent,{width:250}); // 创建信息窗口对象thisMaker.openInfoWindow(infoWindow); //图片加载完毕重绘infowindow}visual(json);//初始化可视化数据//停止拖拽地图时触发可视化数据map2.addEventListener("dragend",function(){visual(json);});//地图更改缩放级别结束时触发触发此事件map2.addEventListener("zoomend",function(){visual(json); //缩放时触发可视化数据if(map2.getZoom() <= 10){document.getElementById("container_two").style.display="none";//隐藏第二张地图document.getElementById("container").style.display="block";//显示第一张...init(jsons,map2.getCenter());//获取地图中心点}});
}
第二层地图
第二种：自定义覆盖物
我使用的第二种
遇到的问题：覆盖物优先级
样式元素可以你们可以自己写
/*** 第二层地图*/
function map_two(json,point_one) {// 创建Map实例map2 = new BMap.Map("container_two");map2.centerAndZoom(point_one, 14);map2.setMinZoom(10);map2.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]})); map2.enableScrollWheelZoom(true);//开启鼠标滚轮缩放for(var i in json.data){//标记addMarker(json.data[i]);}//创建标注function addMarker(obj){//获取经纬度var point = new BMap.Point(obj.longitude,obj.latitude);//定义自己的覆盖物实体function ComplexCustomOverlay(lon, lat,img,obj) {this._point = new BMap.Point(lon, lat);this._lon = lon;this._lat = lat;this._img = img;this._obj = obj;};//继承API的BMap.OverlaComplexCustomOverlay.prototype = new BMap.Overlay();//重写初始化自定义覆盖物构造ComplexCustomOverlay.prototype.initialize = function (map) {// 保存map对象实例 this._map = map;// 创建div元素，作为自定义覆盖物的容器 var div = document.createElement("div"); div.style.position = "absolute";//让文字不被选中div.style.MozUserSelect = 'none';div.style.height = "27px";div.style.width="27px";var oneDiv = document.createElement("div");$(oneDiv).css({"height":"30","width":"25","white-space": "nowrap",//段落中的文本不进行换行"color":"#fff","text-align":"center","line-height":"30px"}); $(div).append('<div class="detail" style="display:block; width:250px; position:relative;top:-65px;-;left:-100px;padding:10px; background:#fff;"><p style="font-size:12px;"><strong style="font-size:14px;">'+obj.title+'</strong><a href="javacript:void(0);" style="float:right;" id="del">X</a></p>'+'<p style="color:#9B9B9B">'+obj.property_type+' <nobr style="color:#8CBF1F;font-size:14px;">'+obj.price_rmb+''+'</nobr>元/㎡ <nobr>'+obj.price_bs+'₱/㎡</nobr></p></div>');div.appendChild(oneDiv);// 根据参数设置元素外观(标记)div.style.background = "url(" + this._img + ")";$(div).click(function(){map.centerAndZoom(point,15);//定位视野$(this).css("z-index","-999");//z-index:如果为正数，则离用户更近，为负数则表示离用户更远$(this).children(".detail").css("display","block");}); $(div).find("#del").click(function(e){map.centerAndZoom(point,15);//定位视野$(div).children(".detail").css("display","none");e.stopPropagation();//防止冒泡和捕获e.preventDefault();//取消默认事件}); // 保存div实例 this._div = div;// 将div添加到覆盖物容器中 map.getPanes().labelPane.appendChild(div);return div;};//重写draw,调整偏移位置ComplexCustomOverlay.prototype.draw = function () {// 根据地理坐标转换为像素坐标，并设置给容器var pixel = this._map.pointToOverlayPixel(this._point);this._div.style.left = pixel.x - 19 + "px";this._div.style.top = pixel.y - 33 + "px";};//创建并添加到容器var myOverlay1 = new ComplexCustomOverlay(obj.longitude,obj.latitude,"../image/biaoji.png",obj);map2.addOverlay(myOverlay1);}visual(json);//初始化可视化数据//停止拖拽地图时触发map2.addEventListener("dragend",function(){visual(json);});//地图更改缩放级别结束时触发触发此事件map2.addEventListener("zoomend",function(){if(map2.getZoom() <= 10){document.getElementById("container_two").style.display="none";document.getElementById("container").style.display="block";//清除新房数据$("#result").html("");init(jsons,map2.getCenter());//获取地图中心点}});
}可视化数据
就是可见的范围内有多少标记
/*** 可视化数据*/
function visual(json) {//清除新房数据$("#result").html("");//可视范围楼盘数和数据显示var bound = map2.getBounds();//返回地图可视区域var arr = [];//可视楼盘数量var table = "<p class='res-list-total'>可视范围内找到<span class='visible-amount' id='visual'></span>个新房，共<span>"+$("#all_count").val()+"</span>个</p>";for(var i in json.data){(function(n) {//判断是否在可视范围内if(bound.containsPoint(new BMap.Point(json.data[n].longitude,json.data[n].latitude))==true){arr.push("1");table += "<div><div class='res-house-item clearfix'><div class='res-pic fl'><img src='"+img_url+"' alt=''/></div>" +"<div class='res-det fl'><h2>"+json.data[n].title+"</h2><p class='house-type-res'>"+json.data[n].property_type+"<span class='verticle-line'></span>"+area+"</p>" +"<div class='house-price clearfix'><p class='fl'><span class='price-green'>"+json.data[n].price_rmb+"</span><span>元/㎡</span></p><p class='fl'><span>"+json.data[n].price_bs+"</span><span>₱/㎡</span></p></div>" +"<p class='key-intr'>"+json.data[n].house_feature+"</p></div></div></div>"; }})(i);}if(arr.length>0){$("#result").append(table);$("#visual").html(arr.length);}else{$("#result").append("当前可视范围内未找到房源哦!");}
}
滑动滚动条到底部自动加载6条
/***下拉自动加载10条数据*/
//初始页
var currentPage = 1;
//每页显示的条数
var showLinePage = 8;
//总页数
var pageNum = 1;
//总记录数
var totalCount = $("#all_count").val();pageNum = parseInt(totalCount/showLinePage);
if((totalCount % showLinePage) != 0){pageNum += 1;
}
if(pageNum == 0){pageNum = 1;
}
//下一页
function nextPage(){if( ++currentPage > pageNum){currentPage = pageNum ;}
}//定义在事件外边，防止被覆盖
var iTime;
/*** 内部滚动条* 当滚动条滑动，触发事件，判断是否到达最底部*/
$("#result").on('mousewheel', function(event) {var scrollHeight = document.getElementById("dataTop").scrollHeight;//是div里内容的高度，根据内容的增加和减少变化。var scrollTop = document.getElementById("dataTop").scrollTop;//是div内里框框的高度var clientHeight = document.getElementById("dataTop").clientHeight;//是滚动条的最上端到，div上端内里框框的高度//滚动到底会连续多次触发事件，造成多次请求，数据重复显示//解决：事件多次触发，只执行最后一次clearTimeout(iTime);iTime = setTimeout(function () {//判断是否到达最底部if(scrollHeight - clientHeight == scrollTop){nextPage();//下一页if(totalCount > jsons.data.length){//判断够不够下一页。//调用ajax处理函数异步加载数据$.post("/house_list_data" , {cndtn1:cndtn1,cndtn2:cndtn2,cndtn3:cndtn3,currentPage : currentPage, showLinePage : showLinePage} , function(data){var json = JSON.parse(data);if(json.status != "success"){$(".fail-dialog").html(json.errMsg);$(".fail-dialog").show().delay(2000).fadeOut();return;}//新数据动态追加到已有的数据里for (var i = 0, l = json.data.length; i < l; i++) {jsons.data.push(json.data[i]);}//可视范围楼盘数和数据显示var bound = map.getBounds();//返回地图可视区域var arr = [];//可视楼盘数量var area = "";var img_url = "";var table = "";for(var n in json.data){//判断是否在可视范围内if(bound.containsPoint(new BMap.Point(json.data[n].longitude,json.data[n].latitude))==true){arr.push("1");if(json.data[n].smallarea==""||json.data[n].smallarea==undefined){if(json.data[n].bigarea==""||json.data[n].bigarea==undefined){area="";}else{area=""+json.data[n].bigarea*1+"㎡ ";}}else{area=""+json.data[n].smallarea*1+"~"+json.data[n].bigarea*1+"㎡ ";}if(json.data[n].img_url==''||json.data[n].img_url==undefined){img_url="../image/nodata.png";}else{img_url=json.data[n].img_url;}table += "<div class='res-house-item clearfix'><a href='/house_detail?id="+json.data[n].id+"&&number=1'><div class='res-pic fl'><img src='"+img_url+"' alt=''/></div>" +"<div class='res-det fl'><h2>"+json.data[n].title+"</h2><p class='house-type-res'>"+json.data[n].property_type+"<span class='verticle-line'></span>"+area+"</p>" +"<div class='house-price clearfix'><p class='fl'><span class='price-green'>"+json.data[n].price_rmb+"</span><span>元/㎡</span></p><p class='fl'><span>"+json.data[n].price_bs+"</span><span>₱/㎡</span></p></div>" +"<p class='key-intr'>"+json.data[n].house_feature+"</p></div></a></div>"; }}if(arr.length>0){$("#dataTop").append(table);$("#visual").html((arr.length + parseInt($("#visual").html())));}else if(jsons.data.length <= 0){$("#result").append("很抱歉，没有找到合适的房源，请重新查找!");}else if(arr.length <= 0){$("#result").append("当前可视范围内未找到房源哦!");}//传新数据调用方法init(jsons,map.getCenter());});}}}, 100);});百度地图：层级地图、行政边界、圆形覆盖物、自定义覆盖物、可视化数据显示、放大及缩小、下拉滚动加载数据等...相关推荐
- 提取某一个镇的行政边界_高德地图api获取行政边界矢量方法
高德地图api获取行政边界矢量方法 发布时间:2018-09-07 17:51, 浏览次数:2170 , 标签: api 1.获取高德地图web服务key 2.行政区域查询API服务地址: https ...
- 百度地图Javascript使用海量点加载数据并自定义图标
** 百度地图Javascript使用海量点加载数据并自定义图标 由于数据量较大时使用Marker点在地图上标点会造成浏览器卡死,点聚合的形式可以解决数据量大浏览器卡死问题,但是移除点时点聚合不太好用 ...
- 高德地图 Vue 中 加载 数据可视化 Loca 的方式
高德地图 Vue 中 加载 数据可视化 Loca 的方式 今天想用 Loca 试试如何的,结果怎么都加载不上,我的代码是这样的 AMapLoader.load({key: "这个就不展示了& ...
- 百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...
- 高德地图巡航异步加载数据_“高德地图”和“百度地图”的差别
高德地图"和"百度地图"到底有什么差别?专家:细节定成败! 导读:高德和百度都是做电子地图的,很多人很好奇,高德地图和百度地图的区别是什么.除了开发者不同,两者在数据和功 ...
- 天地图服务在https协议下请求正常加载显示地图
首先把需要使用的天地图服务,如矢量地图服务地址如下: //天地图矢量服务 "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQ ...
- vuebaidumap 删除覆盖物_VUE BAIDU MAP覆盖物 - 自定义覆盖物手记
前言 覆盖物的最高级就是自定义覆盖物,而往往业务中就必须用自定义覆盖物,因为都用上了地图这么吊的组件了,覆盖物也必须华丽.高度定制. 官网 Github 自定义覆盖物手册 效果 效果核心其实是三角箭头 ...
- 顺子SEO工具包：集百度指数、权重、收录批量查询、文章伪原创，网址URL下拉框采集一体
做SEO的人多少会用到各种查询工具, 今天小编就来分享一些SEO常用工具包: 1.网址批量采集: 多线程换IP一分钟采集3000条,速度超快[突破百度验证码] 实测效率: 电脑配置(四核8G,win1 ...
- 每日三思:微信小程序多层级父子组件如何在子组件滚动加载
碰到的问题是如果将孙子组件单独拿出来是能滚动加载数据的,但是如果父组件存在切换的tab,子组件也存在tab切换,子组件就无法滚动加载数据 示意图 代码结构 刚开始的处理思路 在子组件中使用滚动加载,但 ...
最新文章
- SHELL 技能树（持续更新）
- Delphi数据库开发之TTable篇1
- dataframe python格式_python3.6 pandas，Series和DataFrame基础格式与用法，附代码实例
- 精通python网络爬虫-精通Python网络爬虫：核心技术、框架与项目实战
- 利用JFreeChart生成简单柱状图(Java)
- 《深入理解计算机系统》读书笔记四:操作系统的抽象
- 基于Android Studio搭建hello world工程
- Django之模型层和ORM
- [转]C++学习:VC++动态链接库(DLL)编程深入浅出(zz)
- linux运维有前途么,想去做linux运维，不知道有前途么？
- [Swagger2]拓展：其他皮肤
- 【NOI OpenJudge1789】算24（搜索）
- js右下角广告[兼容]
- dataframe在最后新增一行_【TOOLS】python中对Excel进行写入操作，写入一列或者一行（openpyxl）...
- 【通过输入身份证前17位得到省份，性别，年龄，出生日期和最后一位】
- sql-update 用法
- android 虚拟按键挡住布局,Android 虚拟按键遮住了页面内容解决办法
- 日本語トレーニング45
- Linux系统编程.NO7——目录操作函数
- ssi 指令 php,SSI使用详解（二）_PHP教程