地图找房。仿照优化了下版本
先看下实现效果
直接粘贴代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BaiDuMap.aspx.cs" Inherits="HouseSellSys_BaiDuMap" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>麦田地图找房</title> <style> </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=***************"></script>此内容要自己去百度api拿取ak <script src="../../layuimini/jquery-3.3.1.min.js"></script> <%-- <link href="../css/Style.css" rel="stylesheet" />--%> <%--<link href="./css/style.css" rel="stylesheet">--%> <style> * { padding: 0; margin: 0; } body, html { width: 100%; height: 800px; margin: 0; font-family: "微软雅黑"; } #allMap { height: 100%; width: 100%; } .bubble p { width: 80px; line-height: 20px; text-align: center; color: #fff; font-size: 14px; } .bubble .name { margin-top: 20px; } .bubble .count { margin-top: 3px; } .ZLQbubble { text-align: center; padding: 0px 5px; } .ZLQbubble span { height: 22px; //高度 line-height: 22px; color: #fff; font-size: 14px; } .ZLQbubble .count { font-weight: bold; } .drawing, .exit { position: absolute; top: 10px; left: 1300px; background: #46ACFF; border: 0px; color: white; width: 100px; height: 25px; line-height: 25px; font-size: 15px; font-weight: bold; border-radius: 15px; outline: none; } .exit { left: 1410px; } .Kemap-page .ditu-house_list { width: 375px; overflow-y: hidden; background: #fff; max-height: calc(100vh - 120px); box-shadow: 0 0 8px 0 rgb(0 0 0 / 8%); border-radius: 4px; position: absolute; top: 88px; left: 24px; z-index: 9; transition: top .5s; -webkit-transition: top .5s; -moz-transition: top .5s; -o-transition: top .5s; } .Kemap-page .ditu-house_list .title { font-family: PingFangSC-Regular; font-size: 14px; color: #222; padding: 0 16px; height: 50px; line-height: 50px; border-bottom: 1px solid #f0f0f0; overflow: hidden; } </style> </head> <body> <div id="allMap"> </div> <%-- <button class="drawing" id="draw">画圈找房</button> <button class="exit" id="exit">退出画圈</button>--%> </body> </html> <script> /** * 说明:数据量较少，所以不是每一个区下面都有数据，只模拟造了少量数据 */ var map = null; // 所有行政边界对象 var plyAll = {}; // 第三级小区数据marker数组 var thirdlyMkr = []; var area = { "思明区": "118.06177676187,24.448446803594;118.07950925935,24.440195788519;118.14526344278,24.422950863536;118.18740255813,24.457662802458;118.2105089128,24.484225864946;118.2068801463,24.497621140109;118.20680032654988,24.50535085893594;118.20626134324407,24.505383738948844;118.20536303773439,24.50535085893594;118.20404252863516,24.505202898770243;118.20378202003735,24.505211118784064;118.20344066394367,24.505194678755874;118.20344066394367,24.505202898770243;118.20247947704831,24.50509603854104;118.2025064262136,24.505104258561925;118.20247947704831,24.505104258561925;118.2024974431585,24.50511247858228;118.20102422212263,24.50509603854104;118.19763761035112,24.5050878185196;118.19524811769537,24.505498818925506;118.19420608330414,24.501914849644763;118.19414825829,24.500574423638;118.18168398167,24.499970752651;118.18175983941,24.496271446526;118.18048397749,24.490548838429;118.16963737613,24.491783687789;118.165659,24.491707;118.162677,24.491872;118.160809,24.492562;118.156569,24.494601;118.152365,24.495357;118.15028,24.495883;118.148664,24.496607;118.148017,24.497067;118.14747141493,24.497331504664;118.14483319351,24.49808633069;118.14116518228,24.498075137582;118.13777635204,24.497393891961;118.13569719714,24.495808282882;118.13481630121,24.49570262309;118.13160352095,24.50976272693;118.13038437704,24.51101892066;118.12613662212,24.507302671918;118.11354066544,24.502836035248;118.10765125145,24.500698045009;118.10165209405,24.500250562504;118.0904858013,24.489521884853;118.08250054073,24.48245381348;118.07333879326,24.483081945585;118.06177676187,24.448446803594", "湖里区": "118.2067207921,24.535402719449;118.193074,24.565503;118.187325,24.576545;118.165478,24.587586;118.155705,24.596523;118.091889,24.540787;118.07545985551,24.483060680176;118.0824429154,24.482562393971;118.09445743907,24.493532304438;118.10174879366,24.500426991956;118.10755119567,24.500854075033;118.11340586458,24.502818147215;118.12610344401,24.507366964242;118.13038385089,24.511090003961;118.13163072548,24.509775393512;118.13483970129,24.495724078733;118.13566624021,24.495844406574;118.13779189951,24.497463763578;118.14122063226,24.498138610079;118.14490923265,24.4981572882;118.14754413144,24.497367654466;118.148915,24.496549;118.150245,24.495949;118.150712,24.495851;118.15232,24.495489;118.156569,24.494618;118.157745,24.494198;118.159192,24.49345;118.161419,24.492266;118.162641,24.49197;118.16548,24.491674;118.16959742016,24.491831286322;118.18045914643,24.490580130025;118.18168897665,24.496209130061;118.18162892189,24.500066077861;118.1941583221,24.500641549016;118.194332,24.501998;118.19526608380556,24.505482378935366;118.19754777980016,24.505104258561925;118.19844608530984,24.505104258561925;118.20117693405928,24.50507137847509;118.20318913840096,24.505153578675866;118.2047521899878,24.505285098884038;118.20575829215865,24.505334418926225;118.2061355804727,24.50535085893594;118.20656676711735,24.505334418926225;118.20660269933775,24.505317978914338;118.20674856472,24.497613048464;118.20666037557,24.510833566997;118.2067207921,24.535402719449", "海沧区": "118.08609139146,24.528599734623;117.99986785329,24.563072531464;117.95867177585,24.602033530516;117.96023862888,24.622115800884;117.9681021924,24.638512107443;117.96065057394,24.654205547599;117.93771044068,24.643132086099;117.9180898568,24.605149045395;117.90083521397,24.603664365858;117.87208739933,24.598565132518;117.87837289927,24.58357996167;117.87019785783,24.57021231817;117.90130538734,24.568287366858;117.91018131251,24.535586512731;117.95350006438,24.514976588221;117.97007476346,24.492234942987;117.96032702404,24.463481523898;117.97142971592,24.437922042187;118.02726070584,24.423152118603;118.06710595094,24.426548599516;118.05631449005,24.450502013532;118.08609139146,24.528599734623", "翔安区": "118.24062526975,24.522658822107;118.33175369432,24.530974801324;118.40808565655,24.552522331087;118.411169618,24.567173404527;118.36899492547,24.58246559432;118.35405594366,24.673420580653;118.37702870128,24.757550675208;118.35694537793,24.812281317051;118.31263536267,24.823059372256;118.25299063761,24.742210574756;118.193744658,24.700765308806;118.19321721405,24.693393369389;118.20107,24.680593;118.202651,24.673238;118.197764,24.672384;118.193668,24.671596;118.19338,24.667656;118.193811,24.665554;118.194961,24.652616;118.16295765211,24.597861171405;118.24062526975,24.522658822107", "同安区": "118.194027,24.701145;118.217023,24.717361;118.227228,24.724648;118.232977,24.728718;118.236283,24.731277;118.25193157731,24.742250917034;118.22512983576,24.762488219812;118.25238717584,24.782142009455;118.22481985499,24.841235210188;118.15597873887,24.911380748719;118.0225553759,24.883239011479;117.95769135558,24.806084263687;118.01598361922,24.728865854292;118.02620897535,24.720252066456;118.017863,24.737342;118.019012,24.742592;118.016713,24.738917;118.027061,24.722638;118.057969,24.691112;118.106837,24.658014;118.13587,24.649476;118.135116,24.643083;118.140721,24.630898;118.135907,24.627022;118.13508,24.627547;118.135996,24.626833;118.134541,24.625864;118.134325,24.625765;118.133894,24.626094;118.132457,24.627687;118.132583,24.627982;118.133715,24.629001;118.135727,24.627293;118.139464,24.630044;118.139428,24.629978;118.135637,24.627293;118.133643,24.628894;118.133697,24.628804;118.132098,24.627777;118.134577,24.625675;118.135511,24.627087;118.134936,24.626094;118.13429,24.625642;118.132421,24.627909;118.133751,24.62896;118.132457,24.62781;118.133535,24.628927;118.135799,24.627153;118.140685,24.630569;118.143991,24.627022;118.159154,24.614527;118.193362,24.651446;118.193021,24.668904;118.19338,24.671662;118.202291,24.673501;118.200854,24.68033;118.197045,24.687225;118.193021,24.693726", "集美区": "118.02591992985,24.719858518698;117.96317431437,24.744084735863;117.92077834984,24.731546999913;117.96899235142,24.678809934744;117.96019591317,24.656427751029;117.96896730553,24.638915895187;117.96082095171,24.622200485988;117.95914059844,24.602263152368;118.00014347166,24.563854905937;118.07367357637,24.533952240833;118.16446232017,24.606436170556;118.1432235761,24.625774255872;118.140973,24.630306;118.134397,24.625609;118.133319,24.626529;118.132493,24.627777;118.133751,24.628993;118.136122,24.626759;118.140793,24.630766;118.139608,24.633591;118.13294795947,24.647601666557;118.10611960284,24.657313332814;118.076169,24.677244;118.062084,24.687619;118.053316,24.695498;118.037794,24.710599;118.02591992985,24.719858518698", } // 一级数据 var firstData=[]; let secondData = {}; let thirdlyData = {}; function demon () { $.ajax({ url: "BaiDuMapTurnove.ashx?action=GetNapAccess", async: false, //改为同步方式 type: "POST", data: { }, success: function (data) { if (data.code == 0) { var markers = []; var pt = null; firstData = data.data.StairList; console.log(data.data) secondData = data.data.FoxbaseList; thirdlyData = data.data.ThreeLevel; } }, dataType: "json" }); // 初始化地图 initMap() // 是否处于画圈状态下 var isInDrawing = false; // 是否处于鼠标左键按下状态下 var isMouseDown = false; // 存储画出折线点的数组 var polyPointArray = []; // 上次操作画出的折线 var lastPolyLine = null; // 画圈完成后生成的多边形 var polygonAfterDraw = null; var drawBtn = document.getElementById("draw"); var exitBtn = document.getElementById("exit"); demon() addMarker(firstData, true) // 搜索二级数据坐标 --此处搜索只是为了方便，如果项目实际用那就提前将坐标爬取下来！！！ //addMarker(secondData, false) // 搜索三级数据坐标 /* searchCoord(thirdlyData)*/ //// 初始化画圈找房 //drawing(); /** * 初始化地图 */ function initMap() { map = new BMap.Map("allMap", { enableMapClick: false, minZoom: 10 }); // 创建Map实例 map.centerAndZoom(new BMap.Point(118.13208, 24.501981), 12); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); // 监听地图级别缩放事件，当级别为9时默认加载集合点，扩大级别时显示详细点位数据 map.addEventListener("zoomend", function () { var zoomLevel = map.getZoom(); // 获取地图缩放级别 if (zoomLevel <= 13) { addMarker(firstData, true); } else if (zoomLevel > 13 && zoomLevel <= 15) { addMarker(secondData, false); } else if (zoomLevel > 15) { addLable(thirdlyData) } }); // 监听地图移动,根据视野动态加载 map.addEventListener("moveend", function () { var zoomLevel = map.getZoom(); // 获取地图缩放级别 if (zoomLevel > 15) { addLable(thirdlyData) } }); } //* // * 绑定按钮事件 function drawing() { // 开始画圈绑定事件 drawBtn.addEventListener('click', function (e) { var zoomLevel = map.getZoom(); if (zoomLevel <= 15) { alert("请放大到三级数据进行画图找房"); return; } // 禁止地图移动点击等操作 map.clearOverlays() map.disableDragging(); map.disableScrollWheelZoom(); map.disableDoubleClickZoom(); map.disableKeyboard(); // 设置鼠标样式 map.setDefaultCursor('crosshair'); // 设置标志位进入画圈状态 isInDrawing = true; }); // 退出画圈按钮绑定事件 exitBtn.addEventListener('click', function (e) { // 恢复地图移动点击等操作 map.enableDragging(); map.enableScrollWheelZoom(); map.enableDoubleClickZoom(); map.enableKeyboard(); map.setDefaultCursor('default'); addLable(thirdlyData) // 设置标志位退出画圈状态 isInDrawing = false; }) // 为地图绑定鼠标按下事件(开始画圈) map.addEventListener('mousedown', function (e) { // 如果处于画圈状态下,清空上次画圈的数据结构,设置isMouseDown进入画圈鼠标按下状态 if (isInDrawing) { // 清空地图上画的折线和圈 map.removeOverlay(polygonAfterDraw); map.removeOverlay(lastPolyLine); polyPointArray = []; lastPolyLine = null; isMouseDown = true; } }); // 为地图绑定鼠标抬起事件(画圈完成) map.addEventListener('mouseup', function (e) { // 如果处于画圈状态下 且 鼠标是按下状态 if (isInDrawing && isMouseDown) { // 退出画线状态 isMouseDown = false; // 添加多边形覆盖物,设置为禁止点击 var polygon = new window.BMap.Polygon(polyPointArray, { strokeColor: '#46ACFF', strokeOpacity: 1, fillColor: '#46ACFF', fillOpacity: 0.3, enableClicking: false }); map.addOverlay(polygon); //包含情况 show(polygon); } }); // 为地图绑定鼠标移动事件(触发画图) map.addEventListener('mousemove', function (e) { // 如果处于鼠标按下状态,才能进行画操作 if (isMouseDown) { // 将鼠标移动过程中采集到的路径点加入数组保存 polyPointArray.push(e.point); // 除去上次的画线 if (lastPolyLine) { map.removeOverlay(lastPolyLine) } // 根据已有的路径数组构建画出的折线 var polylineOverlay = new window.BMap.Polyline(polyPointArray, { strokeColor: '#46ACFF', strokeOpacity: 1, enableClicking: false }); // 添加新的画线到地图上 map.addOverlay(polylineOverlay); // 更新上次画线条 lastPolyLine = polylineOverlay } }) } /** * 根据画的圈，显示相应的marker * @param {Object} polygon */ function show(polygon) { // 得到多边形的点数组 var pointArray = polygon.getPath(); // 获取多边形的外包矩形 var bound = polygon.getBounds(); // 在多边形内的点的数组 var pointInPolygonArray = []; // 计算每个点是否包含在该多边形内 for (var i = 0; i < thirdlyMkr.length; i++) { // 该marker的坐标点 var markerPoint = thirdlyMkr[i].getPosition(); if (isPointInPolygon(markerPoint, bound, pointArray)) { map.addOverlay(thirdlyMkr[i]) } } } /** * 根据行政区划绘制聚合点位 * @param {Object} data 数据 * @param {Object} flag 判断是一级点位还是二级,因为一级目前有行政边界，二级目前没有. * 此处如果二级也需要和链家完全一致，想要行政边界，那么就去链家爬取即可 */ function addMarker(data, flag) { map.clearOverlays(); $.each(data, function (index, data) { // 如果是一级 if (flag) { // 绘画行政边界 getBoundary(data.name) } var point = new BMap.Point(data.longitude, data.latitude); // 自定义label样式 var tpl = '<div class="bubble bubble-1" data-longitude="' + data.longitude + '"' + ' data-latitude="' + data.latitude + '">' + '<p class="name" title="' + data.name + '">' + data.name + '</p>' + '<p class="count"><span>' + data.count + '</span>套</p>' + '</div>'; var myLabel = new BMap.Label(tpl, { position: point, // label 在此处添加点位位置信息 offset: new BMap.Size(-42, -42) }); myLabel.setStyle({ width: "80px", // 宽 height: "80px", // 高度 border: "0", // 边 borderRadius: "80px", background: "#46ACFF", // 背景颜色 opacity: 0.9, cursor: "pointer", zIndex: 2 }); myLabel.setTitle(data.name); map.addOverlay(myLabel); // 添加点位 // 当鼠标悬停在label上时显示行政区划边界 myLabel.addEventListener("mouseover", function () { myLabel.setStyle({ background: "#E2A76E", zIndex: 4 }); // 修改覆盖物背景颜色 if (flag) { var regionName = myLabel.getTitle(); plyAll[regionName].show(); } }); // 当鼠标离开时在删除边界折线数据 myLabel.addEventListener("mouseout", function () { myLabel.setStyle({ background: "#46ACFF", zIndex: 2 }); // 修改覆盖物背景颜色 if (flag) { var regionName = myLabel.getTitle(); plyAll[regionName].hide(); } }); myLabel.addEventListener("click", function () { let point = myLabel.getPosition() if (flag) { map.centerAndZoom(point, 14); } else { map.centerAndZoom(point, 16); } }); }) } /** * 加载第三级小区数据 * @param {Object} data */ function addLable(data) { map.clearOverlays(); // 首先判断是不是第一次请求 if (thirdlyMkr.length <= 0) { $.each(data, function (index, data) { var point = new BMap.Point(data.longitude, data.latitude); // 自定义label样式 var tpl = '<div class=" bubble-1 ZLQbubble" data-longitude="' + data.longitude + '"' + ' data-latitude="' + data.latitude + '">' + '<span class="name" title="' + data.name + '">' + data.name + '</span>  ' + '<span class="count"><span>' + data.count + '</span>套</span>' + '</div>'; var myLabel = new BMap.Label(tpl, { position: point, // label 在此处添加点位位置信息 offset: new BMap.Size(-42, -42) }); myLabel.setStyle({ height: "22px", // 高度 lineHeight: "22px", border: "0", // 边 borderRadius: "2px", background: "#46ACFF", // 背景颜色 opacity: 0.9, cursor: "pointer", zIndex: 2 }); myLabel.setTitle(data.name); // 直接缓存起来 thirdlyMkr.push(myLabel); myLabel.addEventListener("mouseover", function () { myLabel.setStyle({ background: "#E2A76E", zIndex: 4 }); // 修改覆盖物背景颜色 }); myLabel.addEventListener("mouseout", function () { myLabel.setStyle({ background: "#46ACFF", zIndex: 2 }); // 修改覆盖物背景颜色 }); myLabel.addEventListener("click", function () { alert("点击了") var html = '<div class="ditu-house_list" style="display: block;"><div class="title"><span><i class="back"></i>返回查看可视范围内的全部房子</span><div class="lj-track close-item" data-click-evtid="32438" data-click-event="WebClick" data-action="{"type":"地图","status":"打开"}"><i class="close-list down"></i></div></div><div class="resblock-info"><div class="name"><div class="lj-track resblock-item" data-click-evtid="32181" data-click-event="WebClick"><a class="resblock-name" href="https://xm.lianjia.com/xiaoqu/3911056390773/" target="_blank">世纪海湾二期<i></i></a></div><span>参考均价</span></div><p>塔楼 塔板结合 | 共4栋 941户 | 2003年建成<i>7.3万元/㎡</i></p></div><div><div class="sort"><ul><li class="select _color">综合排序</li><li class="">总价<i class=""></i></li><li class="">单价<i class=""></i></li><li class="">面积<i class=""></i></li><li class="">最新</li></ul><span>在售<i class="_color">27</i>套房源</span></div><div class="lj-track" data-view-evtid="32185" data-view-event="ModuleExpo" data-action="{"biz_type":"二手房","type":"地图","item_type":"小区"}"><div class="house-card"><div><ul><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":0,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/0123f7f100100657a9cf388576fcb00e-030.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">世纪海湾二期地下停车位，户数多，车位少</span><p>1室0厅/79.29㎡/东 西/世纪海湾二期</p><div class="tag"><span>满五年</span></div><div class="price"><span class="total-price">115万</span><span class="unit-price">14504元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":1,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/hdic-frame/cyclops-41DjM6e3gP62qlzG.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">世纪海湾二期 4室2厅 东南</span><p>4室2厅/171.03㎡/东南/世纪海湾二期</p><div class="tag"><span>满五年</span><span>近地铁</span><span>随时可看</span></div><div class="price"><span class="total-price">1218万</span><span class="unit-price">71216元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":2,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/hdic-frame/fcb44d39-bb01-4a31-b875-8b1b1702b6d4.png.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">滨北地铁口旁，大4房2厅的，通透户型朝南</span><p>4室2厅/173.95㎡/西南/世纪海湾二期</p><div class="tag"><span>满五年</span><span>近地铁</span></div><div class="price"><span class="total-price">1200万</span><span class="unit-price">68986元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":3,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/8dcb128d-cf02-41d1-a177-5626bb30661c_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">闹中取静，格局方正，通风性好，三房两厅两卫</span><p>3室2厅/136.03㎡/西北/世纪海湾二期</p><div class="tag"><span>满五年</span><span>VR房源</span><span>近地铁</span><span>随时可看</span></div><div class="price"><span class="total-price">978万</span><span class="unit-price">71896元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":4,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/bdad9d18-0fce-4b3c-9088-d39af777152e_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">狐尾山下 全明格局2房 朝南大阳台 户型方正带电梯</span><p>2室2厅/93.77㎡/东南/世纪海湾二期</p><div class="tag"><span>满五年</span><span>VR房源</span><span>近地铁</span></div><div class="price"><span class="total-price">750万</span><span class="unit-price">79983元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":5,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/350200-frame/56733b3c-ae00-4e04-aaab-422afbac3ae9.png.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">世纪海湾二期 4室2厅 西</span><p>4室2厅/134.84㎡/西/世纪海湾二期</p><div class="tag"><span>近地铁</span><span>随时可看</span></div><div class="price"><span class="total-price">960万</span><span class="unit-price">71196元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":6,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/4b01073e-4f37-4759-9057-2444d503c428_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">东西户型正 低公摊，风采佳；临山景一步公园，看湖</span><p>3室2厅/121.65㎡/东 西/世纪海湾二期</p><div class="tag"><span>满五年</span><span>VR房源</span><span>近地铁</span></div><div class="price"><span class="total-price">928万</span><span class="unit-price">76285元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":7,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/fa593845-5fe3-4fed-ac89-1e3d07f05bf3_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">滨北市政府旁，楼中楼看狐尾山看筼筜湖！</span><p>5室2厅/267.29㎡/南 北/世纪海湾二期</p><div class="tag"><span>满五年</span><span>VR房源</span><span>近地铁</span><span>随时可看</span></div><div class="price"><span class="total-price">2059万</span><span class="unit-price">77033元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":8,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/e7681a03-1c28-4ff7-8d09-6560942ed54c_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">世纪海湾南北通透业主精装可拎包入住</span><p>4室3厅/173.32㎡/南 北/世纪海湾二期</p><div class="tag"><span>满两年</span><span>VR房源</span><span>近地铁</span></div><div class="price"><span class="total-price">1190万</span><span class="unit-price">68660元/平</span></div></div></div></li><li class="card-item"><div class="lj-track house-item" data-view-evtid="32186" data-view-event="ItemExpo" data-click-evtid="32187" data-click-event="WebClick" data-action="{"click_position":9,"biz_type":"二手房","type":"地图","item_type":"小区","tag":"二手房"}"><img src="https://ke-image.ljcdn.com/110000-inspection/eca55998-b9ed-4cb8-8ee3-4e361d40c43a_1000.jpg.210x164.jpg?from=ke.com"><div class="house-info"><span class="name">高层，格局方正，通风采光好，西南朝向，看海。</span><p>2室2厅/95.35㎡/西南/世纪海湾二期</p><div class="tag"><span>满五年</span><span>VR房源</span><span>近地铁</span></div><div class="price"><span class="total-price">752万</span><span class="unit-price">78868元/平</span></div></div></div></li></ul></div></div></div></div></div>'; var myLabel = new BMap.Label(html, { position: point, // label 在此处添加点位位置信息 offset: new BMap.Size(-42, -42) }); myLabel.setStyle({ height: "22px", // 高度 lineHeight: "22px", border: "0", // 边 borderRadius: "2px", background: "#46ACFF", // 背景颜色 opacity: 0.9, cursor: "pointer", zIndex: 2 }); }); }) } // 根据视野动态加载 addViewLabel(thirdlyMkr) } /** * 根据行政区划绘制边界 * @param {Object} regionName */ function getBoundary(regionName) { var ply = new BMap.Polygon(area[regionName], { strokeWeight: 1, strokeColor: "#0A77FB", fillColor: "#7EB8FC" }); // 建立多边形覆盖物 ply.hide(); plyAll[regionName] = ply map.addOverlay(ply); // 添加覆盖物 } /** * 根据地图视野动态加载数据，当数据多时此方法用来提高地图加载性能 * 本次模拟数据较少，看不出太大效果 * @param {Object} labels */ function addViewLabel(mkr) { map.clearOverlays(); for (var i = 0; i < mkr.length; i++) { var result = isPointInRect(mkr[i].point, map.getBounds()); if (result == true) { map.addOverlay(mkr[i]) } else { map.removeOverlay(mkr[i]); } } } // 判断地图视野包含哪些点 function isPointInRect(point, bounds) { // 检查类型是否正确 if (!(point instanceof BMap.Point) || !(bounds instanceof BMap.Bounds)) { return false; } var sw = bounds.getSouthWest(); // 西南脚点 var ne = bounds.getNorthEast(); // 东北脚点 return (point.lng >= sw.lng && point.lng <= ne.lng && point.lat >= sw.lat && point.lat <= ne.lat); } // 判定一个点是否包含在多边形内 function isPointInPolygon(point, bound, pointArray) { // 首先判断该点是否在外包矩形内，如果不在直接返回false if (!bound.containsPoint(point)) { return false; } // 如果在外包矩形内则进一步判断 // 该点往右侧发出的射线和矩形边交点的数量,若为奇数则在多边形内，否则在外 var crossPointNum = 0; for (var i = 0; i < pointArray.length; i++) { // 获取2个相邻的点 var p1 = pointArray[i]; var p2 = pointArray[(i + 1) % pointArray.length]; // 如果点相等直接返回true if ((p1.lng === point.lng && p1.lat === point.lat) || (p2.lng === point.lng && p2.lat === point.lat)) { return true } // 如果point在2个点所在直线的下方则continue if (point.lat < Math.min(p1.lat, p2.lat)) { continue; } // 如果point在2个点所在直线的上方则continue if (point.lat >= Math.max(p1.lat, p2.lat)) { continue; } // 有相交情况:2个点一上一下,计算交点 // 特殊情况2个点的横坐标相同 var crossPointLng; if (p1.lng === p2.lng) { crossPointLng = p1.lng; } else { // 计算2个点的斜率 var k = (p2.lat - p1.lat) / (p2.lng - p1.lng); // 得出水平射线与这2个点形成的直线的交点的横坐标 crossPointLng = (point.lat - p1.lat) / k + p1.lng; } // 如果crossPointLng的值大于point的横坐标则算交点(因为是右侧相交) if (crossPointLng > point.lng) { crossPointNum++; } } // 如果是奇数个交点则点在多边形内 return crossPointNum % 2 === 1 } </script>
截图查看返回的一级二级三级数据返回的josn
一级菜单返回json
二级菜单返回json
三级菜单返回json
Slowly I find myself
