地图找房。仿照优化了下版本
作者：互联网
先看下实现效果
直接粘贴代码
<%@ 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
标签：function,map,myLabel,找房,var,版本,仿照,data,point 来源： https://www.cnblogs.com/SDdemon/p/16351126.html