<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>點聚合</title>
<style>
*{
padding: 0;
margin: 0;
}
/* body,div{
position: absolute;
width: 100%;
height: 100%;
} */
#allMap{
position: absolute;
width: 100%;
height: 100%;
}
/*隱藏地圖控件*/
.anchorBL, .BMap_cpyCtrl {
display: none;
}
/*地圖聚合樣式*/
.bubble p {
text-align: center;
color: #fff;
}
.bubble .name {
margin-top: 25px;
font-size: 14px;
}
/*信息窗口樣式*/
.infoArea{
font-size: 12px;
padding: 4px;
/* background-color: #fff; */
border-radius: 2px;
box-shadow: 0 10px 8px 0 rgba(0,0,0,.1);
}
.infoArea:after {
content: '';
position: absolute;
border: 10px solid transparent;
border-top: 10px solid #fff;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}
.infoArea p{
padding: 2px 10px;
}
.infoArea .name {
height: 20px;
line-height: 20px;
font-weight: 800;
}
.bg-info-box{
height: 24px;
line-height: 24px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bg-info{
min-width: 40px;
box-sizing: content-box;
transition: background-color .15s ease-in-out;
padding: 0 3px;
display: inline-block;
background-color: #00a75b;
border-radius: 2px;
/* border: 1px solid #00a75b; */
font-style: normal;
}
.bg-info:hover{
background:#e4393c;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak="></script>
<script src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils.js"></script>
<!-- <script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script> -->
<script type="text/javascript" src="js/InfoBox_min.js"></script>
<script type="text/javascript" src="js/sz.js"></script>
<script type="text/javascript" src="js/ns.js"></script>
<script type="text/javascript" src="js/kjy.js"></script>
</head>
<body>
<!--地圖-->
<div id="allMap"></div>
<script>
// https://blog.csdn.net/tjj3027/article/details/81015138 百度地圖縮放級別對照
let noZoomend = true
let map = new BMap.Map("allMap", {enableMapClick: false, minZoom: 11, maxZoom: 18});
// enableMapClick是否開啟底圖可點功能，默認啟用
map.enableScrollWheelZoom(true);//開啟鼠標滾輪縮放功能。僅對PC上有效
map.disableInertialDragging();//禁用地圖慣性拖拽
window.labelData=[];//存數點位數據
window.map = initMap(12, true);//初始化地圖對象
window.lastInfoBox = null; //定義最近打開的地圖信息窗體
window.pointArray = [];//行政區划點位集合
//左上角，添加默認縮放平移控件
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
map.addControl(top_left_control);
function initMap(jLevel,initPt,lngLat) {
let initPoint = new BMap.Point(113.95565020448,22.552100509472);//科技園中心點
// getBounds() 返回地圖可視區域，以地理坐標表示
setTimeout(()=>{
let initBounds = map.getBounds()
// getSouthWest() Point 返回矩形區域的西南角--左下角
// getNorthEast() Point 返回矩形區域的東北角--右上角
// console.log('map.getBounds()',initBounds,initBounds.getSouthWest(),initBounds.getNorthEast())
if(initBounds.getSouthWest().lng) {
/*獲取當前地圖可視區域內的數據*/
let abc = new BMap.Polygon([
new BMap.Point(initBounds.getSouthWest().lng, initBounds.getSouthWest().lat),
new BMap.Point(initBounds.getSouthWest().lng, initBounds.getNorthEast().lat),
new BMap.Point(initBounds.getNorthEast().lng, initBounds.getNorthEast().lat),
new BMap.Point(initBounds.getNorthEast().lng, initBounds.getSouthWest().lat)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.1}); //建立多邊形覆蓋物
map.addOverlay(abc);
}
},30)
if(!initPt){
// getCenter() 返回矩形的中心點
let cp = map.getCenter();
initPoint = new BMap.Point(cp.lng, cp.lat);
}
if(initPt && lngLat){
noZoomend = false
initPoint = new BMap.Point(lngLat.lng, lngLat.lat);
}
// console.log('lngLat',lngLat)
map.centerAndZoom(initPoint, jLevel);//初始化
// 點擊縮放之后放開縮放事件
noZoomend = true
let resData = {}
if(jLevel <= 12) {
resData = szData
}
if(jLevel > 12 && jLevel < 16) {
resData = nsData
}
if(jLevel >= 16) {
resData = kjyData
}
addMarker(resData)
}
//監聽地圖級別縮放事件，當級別為11時默認加載集合點，擴大級別時顯示詳細點位數據
map.addEventListener("zoomend", function () {
if(!noZoomend){
return
}
// zoomend 地圖更改縮放級別結束時觸發觸發此事件
let zoomLevel = map.getZoom(); //獲取地圖縮放級別
initMap(zoomLevel);
});
//停止拖拽地圖時觸發
map.addEventListener("dragend", function () {
// let initBounds = map.getBounds()
console.log('dragend')
let zoomLevel = map.getZoom(); //獲取地圖縮放級別
initMap(zoomLevel);
});
//根據行政區划繪制聚合點位
function addMarker(resData) {
map.clearOverlays();//清除地圖上所有覆蓋物
labelData = []; //清空點位信息
//模擬數據---這里應該是請求接口后返回的數據
let szDatas = resData.data.list
//為了提高百度地圖性能，本篇例子點位全用label來加載點位
for (let index in szDatas) {
(function(i){
let data = szDatas[i]
// Point(lng: 地理經度, lat: Number) 以指定的經度和緯度創建一個地理點坐標
let point = new BMap.Point(data.longitude, data.latitude);
//自定義label樣式
if(!data.border){
getAllLabel(data)
return
}
let tpl = `<div class="bubble bubble-1" data-longitude="${data.longitude}"` +
` data-latitude="${data.latitude}" data-id="${data.id}" data-border="${data.border}">` +
`<p class="name" title="${data.name}">${data.name}</p>` +
`<p title="${data.unit_price}">${(data.unit_price/10000).toFixed(1)}萬</p>` +
`<p><span class="count">${data.count}</span>個樓盤</p>` +
`</div>`;
let myLabel = new BMap.Label(tpl,{
position: point, //label 在此處添加點位位置信息
offset: new BMap.Size(-46, -46)
});
myLabel.setStyle({
width: "92px", //寬
height: "92px", //高度
border: "0", //邊
background: "rgba(84,144,244,.9)", //背景顏色
borderRadius:"50%",
cursor: "pointer"
});
// myLabel.setTitle(data.name);
map.addOverlay(myLabel);//添加點位
// 當鼠標懸停在label上時顯示行政區划邊界
myLabel.addEventListener("mouseover", function (e) {
myLabel.setStyle({background:"rgba(241,80,68,.9)"}); //修改覆蓋物背景顏色
// console.log('myLabel',myLabel.ba.children[0].dataset)
// var regionName = myLabel.getTitle();
// getBoundary(myLabel.ba.children[0].dataset.border);
getBoundary(data.border)
});
// 當鼠標離開時在刪除邊界折線數據
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({background:"rgba(84,144,244,.9)"}); //修改覆蓋物背景顏色
if (window.ply) {
let polyPathArray = new Array();
window.ply.setPath(polyPathArray);
map.removeOverlay(ply);//清除折線數據
}
});
myLabel.addEventListener("click", function (e) {
//單擊獲取點擊的經緯度
// alert(e.point.lng + "," + e.point.lat);
let zoomLevel = map.getZoom(); //獲取地圖縮放級別
if(zoomLevel <= 12) {
initMap(13,true,e.point);
}
if(zoomLevel > 12 && zoomLevel < 16) {
initMap(16,true,e.point);
}
})
})(index)
}
//加載可視范圍點
if(labelData.length) {
// for(var i = 0; i < labelData.length; i ++){
// map.addOverlay(labelData[i])
// }
addViewLabel(labelData)
}
}
//根據行政區划繪制邊界
function getBoundary(regionBorder) {
if (!window.ply) {
window.ply = new BMap.Polygon(regionBorder, {
strokeWeight: 2,
strokeColor: "rgb(66, 133, 244)",
fillColor: "rgba(53, 126, 244,0.1)"
}); //建立多邊形覆蓋物
map.addOverlay(ply); //添加覆蓋物
} else {
window.ply.setPath(regionBorder);
map.addOverlay(ply); //添加覆蓋物
}
ply.enableMassClear();//允許覆蓋物在map.clearOverlays方法中被清除
pointArray = pointArray.concat(ply.getPath());
}
//繪制詳細樓盤點位信息
function getAllLabel(data) {
map.clearOverlays();
//模擬點位數據
var point = new BMap.Point(data.longitude, data.latitude);
let posInfo = `<p class="bg-info-box"><i class="bg-info">${data.name}</i></p>`
var myLabel = new BMap.Label(posInfo, {
position: point, //label 在此處添加點位位置信息
offset: new BMap.Size(-12, -15)
});
myLabel.setStyle({
border: "0", //邊
backgroundColor: "transparent"
});
// myLabel.setTitle(data.name);
labelData.push(myLabel);
// map.addOverlay(myLabel);
//信息窗口模板
let tpl = `<div class="infoBox" data-longitude="${data.longitude}"` +
` data-latitude="${data.latitude}" data-id="${data.id}">` +
`<div class='infoArea'><p class='name'>${data.name}</p><p class='num'>均價<span class='red'>${(data.unit_price/10000).toFixed(1)}</span>萬元/m3</p></div>` +
`<i class='arrow'><i class='arrow-i'></i></i></div>`;
var infoBox = new BMapLib.InfoBox(map, tpl, {
boxStyle: {
width: "160px",
minHeight: "50px",
marginBottom: "30px",
backgroundColor: "#fff"
},
closeIconMargin: "15px 10px 4px 4px",
closeIconUrl: "https://image1.ljcdn.com/hdic-resblock/1b7bed8e-b8e1-4187-8cc3-f54c46a625f3.jpg.280x210.jpg",
enableAutoPan: false,
align: INFOBOX_AT_TOP
});
//鼠標點擊時打開新標簽並關閉上一個標簽內容
myLabel.addEventListener("mouseover", function () {
myLabel.setStyle({zIndex: "0"});
if (window.lastInfoBox) {
//判斷上一個窗體是否存在，若存在則執行close
window.lastInfoBox.close();
}
window.lastInfoBox = infoBox;
infoBox.open(point);
});
// 當鼠標離開時再刪除邊界折線數據
myLabel.addEventListener("mouseout", function () {
myLabel.setStyle({zIndex: "-1"});
});
//鼠標點擊時標簽一直存在
myLabel.addEventListener("click", function () {
window.lastInfoBox=null;
infoBox.open(point);
});
}
//根據地圖視野動態加載數據，當數據多時此方法用來提高地圖加載性能
//由於此篇模擬點位數據較少，視野加載不明顯，當數據多時可直觀感覺
function addViewLabel(labels) {
// console.log('addViewLabel',labels)
// console.log('map.getBounds()',map.getBounds())
map.clearOverlays();
for(var i = 0; i < labels.length; i ++){
// getBounds() 返回地圖可視區域，以地理坐標表示
// BMapLib.GeoUtils.isPointInRect判斷點是否在矩形內 需要引入GeoUtils_min.js
var result = BMapLib.GeoUtils.isPointInRect(labels[i].point, map.getBounds());
if(result == true) {
map.addOverlay(labels[i])
} else{
map.removeOverlay(labels[i]);
}
}
}
</script>
</body>
</html>
InfoBox_min.js
使用http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js源碼更改了css樣式
var BMapLib=window.BMapLib=BMapLib||{};var INFOBOX_AT_TOP=1,INFOBOX_AT_RIGHT=2,INFOBOX_AT_BOTTOM=3,INFOBOX_AT_LEFT=4;(function(){var b,a=b=a||{version:"1.5.0"};a.guid="$BAIDU$";(function(){window[a.guid]=window[a.guid]||{};a.lang=a.lang||{};a.lang.isString=function(d){return"[object String]"==Object.prototype.toString.call(d)};a.lang.isFunction=function(d){return"[object Function]"==Object.prototype.toString.call(d)};a.lang.Event=function(d,e){this.type=d;this.returnValue=true;this.target=e||null;this.currentTarget=null};a.object=a.object||{};a.extend=a.object.extend=function(f,d){for(var e in d){if(d.hasOwnProperty(e)){f[e]=d[e]}}return f};a.event=a.event||{};a.event._listeners=a.event._listeners||[];a.dom=a.dom||{};a.dom._g=function(d){if(a.lang.isString(d)){return document.getElementById(d)}return d};a._g=a.dom._g;a.event.on=function(e,h,j){h=h.replace(/^on/i,"");e=a.dom._g(e);var i=function(l){j.call(e,l)},d=a.event._listeners,g=a.event._eventFilter,k,f=h;h=h.toLowerCase();if(g&&g[h]){k=g[h](e,h,i);f=k.type;i=k.listener}if(e.addEventListener){e.addEventListener(f,i,false)}else{if(e.attachEvent){e.attachEvent("on"+f,i)}}d[d.length]=[e,h,j,i,f];return e};a.on=a.event.on;a.event.un=function(f,i,e){f=a.dom._g(f);i=i.replace(/^on/i,"").toLowerCase();var l=a.event._listeners,g=l.length,h=!e,k,j,d;while(g--){k=l[g];if(k[1]===i&&k[0]===f&&(h||k[2]===e)){j=k[4];d=k[3];if(f.removeEventListener){f.removeEventListener(j,d,false)}else{if(f.detachEvent){f.detachEvent("on"+j,d)}}l.splice(g,1)}}return f};a.un=a.event.un;a.dom.g=function(d){if("string"==typeof d||d instanceof String){return document.getElementById(d)}else{if(d&&d.nodeName&&(d.nodeType==1||d.nodeType==9)){return d}}return null};a.g=a.G=a.dom.g;a.dom._styleFixer=a.dom._styleFixer||{};a.dom._styleFilter=a.dom._styleFilter||[];a.dom._styleFilter.filter=function(e,h,j){for(var d=0,g=a.dom._styleFilter,f;f=g[d];d++){if(f=f[j]){h=f(e,h)}}return h};a.string=a.string||{};a.string.toCamelCase=function(d){if(d.indexOf("-")<0&&d.indexOf("_")<0){return d}return d.replace(/[-_][^-_]/g,function(e){return e.charAt(1).toUpperCase()})};a.dom.setStyle=function(f,e,g){var h=a.dom,d;f=h.g(f);e=a.string.toCamelCase(e);if(d=h._styleFilter){g=d.filter(e,g,"set")}d=h._styleFixer[e];(d&&d.set)?d.set(f,g):(f.style[d||e]=g);return f};a.setStyle=a.dom.setStyle;a.dom.setStyles=function(e,f){e=a.dom.g(e);for(var d in f){a.dom.setStyle(e,d,f[d])}return e};a.setStyles=a.dom.setStyles;a.browser=a.browser||{};a.browser.ie=a.ie=/msie (\d+\.\d+)/i.test(navigator.userAgent)?(document.documentMode||+RegExp["\x241"]):undefined;a.dom._NAME_ATTRS=(function(){var d={cellpadding:"cellPadding",cellspacing:"cellSpacing",colspan:"colSpan",rowspan:"rowSpan",valign:"vAlign",usemap:"useMap",frameborder:"frameBorder"};if(a.browser.ie<8){d["for"]="htmlFor";d["class"]="className"}else{d.htmlFor="for";d.className="class"}return d})();a.dom.setAttr=function(e,d,f){e=a.dom.g(e);if("style"==d){e.style.cssText=f}else{d=a.dom._NAME_ATTRS[d]||d;e.setAttribute(d,f)}return e};a.setAttr=a.dom.setAttr;a.dom.setAttrs=function(f,d){f=a.dom.g(f);for(var e in d){a.dom.setAttr(f,e,d[e])}return f};a.setAttrs=a.dom.setAttrs;a.dom.create=function(f,d){var g=document.createElement(f),e=d||{};return a.dom.setAttrs(g,e)};b.undope=true})();var c=BMapLib.InfoBox=function(f,e,d){this._content=e||"";this._isOpen=false;this._map=f;this._opts=d=d||{};this._opts.offset=d.offset||new BMap.Size(0,0);this._opts.boxClass=d.boxClass||"infoBox";this._opts.boxStyle=d.boxStyle||{};this._opts.closeIconMargin=d.closeIconMargin||"2px";this._opts.closeIconUrl=d.closeIconUrl||"close.png";this._opts.enableAutoPan=d.enableAutoPan?true:false;this._opts.align=d.align||INFOBOX_AT_TOP};c.prototype=new BMap.Overlay();c.prototype.initialize=function(e){var d=this;var g=this._div=a.dom.create("div",{"class":this._opts.boxClass});a.dom.setStyles(g,this._opts.boxStyle);g.style.position="absolute";this._setContent(this._content);var f=e.getPanes().floatPane;f.style.width="auto";f.appendChild(g);this._getInfoBoxSize();a.event.on(g,"onmousedown",function(h){d._stopBubble(h)});a.event.on(g,"onmouseover",function(h){d._stopBubble(h)});a.event.on(g,"click",function(h){d._stopBubble(h)});a.event.on(g,"dblclick",function(h){d._stopBubble(h)});return g};c.prototype.draw=function(){this._isOpen&&this._adjustPosition(this._point)};c.prototype.open=function(d){var e=this,f;if(!this._isOpen){this._map.addOverlay(this);this._isOpen=true;setTimeout(function(){e._dispatchEvent(e,"open",{point:e._point})},10)}if(d instanceof BMap.Point){f=d;this._removeMarkerEvt()}else{if(d instanceof BMap.Marker){if(this._marker){this._removeMarkerEvt()}f=d.getPosition();this._marker=d;!this._markerDragend&&this._marker.addEventListener("dragend",this._markerDragend=function(g){e._point=g.point;e._adjustPosition(e._point);e._panBox();e.show()});!this._markerDragging&&this._marker.addEventListener("dragging",this._markerDragging=function(){e.hide();e._point=e._marker.getPosition();e._adjustPosition(e._point)})}}this.show();this._point=f;this._panBox();this._adjustPosition(this._point)};c.prototype.close=function(){if(this._isOpen){this._map.removeOverlay(this);this._remove();this._isOpen=false;this._dispatchEvent(this,"close",{point:this._point})}};c.prototype.enableAutoPan=function(){this._opts.enableAutoPan=true};c.prototype.disableAutoPan=function(){this._opts.enableAutoPan=false};c.prototype.setContent=function(d){this._setContent(d);this._getInfoBoxSize();this._adjustPosition(this._point)};c.prototype.setPosition=function(d){this._point=d;this._adjustPosition(d);this._removeMarkerEvt()};c.prototype.getPosition=function(){return this._point};c.prototype.getOffset=function(){return this._opts.offset},c.prototype._remove=function(){var d=this;if(this.domElement&&this.domElement.parentNode){a.event.un(this._div.firstChild,"click",d._closeHandler());this.domElement.parentNode.removeChild(this.domElement)}this.domElement=null;this._isOpen=false;this.dispatchEvent("onremove")},a.object.extend(c.prototype,{_getCloseIcon:function(){var d="<img src='"+this._opts.closeIconUrl+"' align='right' style='height:30px;position:absolute;right:0px;cursor:pointer;margin:"+this._opts.closeIconMargin+"'/>";return d},_setContent:function(e){if(!this._div){return}var d=this._getCloseIcon();if(typeof e.nodeType==="undefined"){this._div.innerHTML=d+e}else{this._div.innerHTML=d;this._div.appendChild(e)}this._content=e;this._addEventToClose()},_adjustPosition:function(f){var d=this._getPointPosition(f);var e=this._marker&&this._marker.getIcon();switch(this._opts.align){case INFOBOX_AT_TOP:if(this._marker){this._div.style.bottom=-(d.y-this._opts.offset.height-e.anchor.height+e.infoWindowAnchor.height)-this._marker.getOffset().height+2+"px"}else{this._div.style.bottom=-(d.y-this._opts.offset.height)+"px"}break;case INFOBOX_AT_BOTTOM:if(this._marker){this._div.style.top=d.y+this._opts.offset.height-e.anchor.height+e.infoWindowAnchor.height+this._marker.getOffset().height+"px"}else{this._div.style.top=d.y+this._opts.offset.height+"px"}break}if(this._marker){this._div.style.left=d.x-e.anchor.width+this._marker.getOffset().width+e.infoWindowAnchor.width-this._boxWidth/2+"px"}else{this._div.style.left=d.x-this._boxWidth/2+"px"}},_getPointPosition:function(d){this._pointPosition=this._map.pointToOverlayPixel(d);return this._pointPosition},_getInfoBoxSize:function(){this._boxWidth=parseInt(this._div.offsetWidth,10);this._boxHeight=parseInt(this._div.offsetHeight,10)},_addEventToClose:function(){var d=this;a.event.on(this._div.firstChild,"click",d._closeHandler());this._hasBindEventClose=true},_closeHandler:function(){var d=this;return function(f){d.close()}},_stopBubble:function(d){if(d&&d.stopPropagation){d.stopPropagation()}else{window.event.cancelBubble=true}},_panBox:function(){if(!this._opts.enableAutoPan){return}var i=parseInt(this._map.getContainer().offsetHeight,10),o=parseInt(this._map.getContainer().offsetWidth,10),j=this._boxHeight,d=this._boxWidth;if(j>=i||d>=o){return}if(!this._map.getBounds().containsPoint(this._point)){this._map.setCenter(this._point)}var e=this._map.pointToPixel(this._point),p,m,l,g=d/2-e.x,n=d/2+e.x-o;if(this._marker){var k=this._marker.getIcon()}switch(this._opts.align){case INFOBOX_AT_TOP:var f=this._marker?k.anchor.height+this._marker.getOffset().height-k.infoWindowAnchor.height:0;p=j-e.y+this._opts.offset.height+f+2;break;case INFOBOX_AT_BOTTOM:var f=this._marker?-k.anchor.height+k.infoWindowAnchor.height+this._marker.getOffset().height+this._opts.offset.height:0;m=j+e.y-i+f+4;break}panX=g>0?g:(n>0?-n:0);l=p>0?p:(m>0?-m:0);this._map.panBy(panX,l)},_removeMarkerEvt:function(){this._markerDragend&&this._marker.removeEventListener("dragend",this._markerDragend);this._markerDragging&&this._marker.removeEventListener("dragging",this._markerDragging);this._markerDragend=this._markerDragging=null},_dispatchEvent:function(d,e,g){e.indexOf("on")!=0&&(e="on"+e);var f=new a.lang.Event(e);if(!!g){for(var h in g){f[h]=g[h]}}d.dispatchEvent(f)}})})();
模擬后台請求的數據
// 只有 南山 -- 科技園 這一條有數據，其他只是展示效果
sz.js文件
var szData = {
"errno":0,
"error":"",
"data":{
"list":{
"23008679":{
"id":23008679,
"name":"南山區",
"longitude":113.94289459583,
"latitude":22.532859206473,
"border":"114.00143176977,22.523217039187;113.99960623268,22.533838590338;114.00095404095,22.53913377428;114.00421420544,22.538619135465;114.003431,22.543161;114.00210992721,22.554325272234;114.00398606367,22.561269824009;114.01180813837,22.563295985283;114.00898445391,22.569793714097;114.01553200417,22.582240423298;114.02178931261,22.588290775359;114.02160963389,22.593375844296;114.02337761646,22.605520170667;114.02223303339,22.610984120089;114.01966123334,22.617743574765;114.02007017689,22.627769033711;114.0192775423,22.629737021113;114.00345539655,22.643793568308;113.96926142892,22.645047044673;113.96245838114,22.656190711309;113.93518807701,22.640907485255;113.94035933771,22.620581378482;113.93137446665,22.59270092087;113.92956705355,22.591090807163;113.93292654023,22.587773594264;113.93626863604,22.586960817744;113.933009816,22.580109995578;113.92823350616,22.577011114006;113.92242770117,22.571520030783;113.92262375292,22.563030965022;113.91625377187,22.558813977394;113.90943040862,22.553437511933;113.894559344,22.542033032512;113.8694175169,22.524156107003;113.84160276977,22.524246351493;113.77410629455,22.411623321404;113.84811074912,22.380714992125",
"unit_price":87261,
"count":6438
},
"23008680":{
"id":23008680,
"name":"坪山區",
"longitude":114.36695722009,
"latitude":22.691224851524,
"border":"114.39383999456,22.762641177481;114.38227951433,22.766130664773;114.38168421041,22.76906023269;114.38181817054,22.770170892588;114.3811072477,22.770287327762;114.37891607663,22.772041360547;114.3772789802,22.77164534528;114.37502177069,22.772244196473;114.3734217515,22.771106834252;114.36646863852,22.77134147694;114.36133016766,22.770691660235;114.35692274739,22.777004519322;114.3514442139,22.767318033759;114.34341839949,22.752998144805;114.3461529869,22.74003763741;114.34399666893,22.732956020951;114.34522641885,22.714345485046;114.33052734116,22.710685420534;114.33078504311,22.707791982591;114.32346503023,22.692561959802;114.31748999072,22.688526950446;114.31751869214,22.687734434747;114.28419065429,22.678499592801;114.27709063456,22.668383248597;114.27775523323,22.664434563099;114.29466101385,22.651809077423;114.29983783218,22.640413596591;114.29925903262,22.630556094816;114.3049600152,22.631655644953;114.31346694352,22.639233103381;114.32161179677,22.631427282248;114.32866098791,22.635752432266;114.34544072615,22.632214811591;114.35609269504,22.637480008823;114.3734488305,22.633711298931;114.37564288112,22.640860434078;114.38088334494,22.641259554291;114.37911295483,22.647858198799;114.38289522522,22.650944611205;114.39439112595,22.642889340023;114.39958186706,22.650437798474;114.41759925489,22.656564389331;114.42011814094,22.659887986345;114.42458138275,22.659324999183;114.42576997777,22.661013809541;114.43287647211,22.663248048525;114.43732697749,22.667871597306;114.43495177603,22.682150482622;114.44858468768,22.68840924238;114.44484336418,22.695947435725;114.44260563751,22.702403093716;114.44603356826,22.709288865736;114.42888178928,22.710752491762;114.42317496933,22.718681194005;114.41937389282,22.723218690674;114.41711066453,22.724278248512;114.41821464313,22.726372252879;114.42680267588,22.732675813452;114.42045469595,22.740062000083;114.41719025018,22.744179563974;114.41697351581,22.756283986007;114.42042480225,22.758295578812;114.41989816319,22.766791481987;114.42430952513,22.767593480014;114.4263581353,22.771651475319;114.41035503482,22.785745141896;114.4022512715,22.782362111991;114.40290931356,22.773183784085;114.40318034807,22.769077330787;114.401592728,22.767547747622;114.40185470373,22.765094219144;114.39383999456,22.762641177481",
"unit_price":34650,
"count":539
},
"23008681":{
"id":23008681,
"name":"鹽田區",
"longitude":114.27492890661,
"latitude":22.59429535479,
"border":"114.20369855674,22.559172953251;114.22885654139,22.558038603179;114.23787605999,22.551537072651;114.23670199541,22.548668375354;114.23843329403,22.54594681282;114.2801309464,22.574170439964;114.29099126496,22.565072833574;114.31410602029,22.573687117335;114.36190386869,22.603934614247;114.35484409937,22.609847031197;114.34493288494,22.612285214393;114.34982791488,22.625114189071;114.34544884395,22.632209246383;114.32866504488,22.635751143142;114.32161667525,22.631419208031;114.3134647778,22.639230919781;114.30495892716,22.631658358738;114.29925821102,22.630562880617;114.29983565679,22.640417135973;114.29465856784,22.651806932912;114.27775714016,22.664437513291;114.26574453099,22.654030119407;114.27154165375,22.632409838583;114.24129384181,22.617856785237;114.22696916522,22.586852842225;114.21348147134,22.58122538014;114.21889321309,22.572102559251;114.20369855674,22.559172953251",
"unit_price":45780,
"count":918
}
},
"visible_count":17944,
"total_count":41260
}
}
ns.js文件
var nsData = {
"errno":0,
"error":"",
"data":{
"list":{
"611100855":{
"id":611100855,
"name":"科技園",
"longitude":113.954273,
"latitude":22.549232,
"border":"113.940547,22.562015;113.940098,22.557726;113.940116,22.551819;113.938966,22.549248;113.938463,22.547212;113.938607,22.540737;113.938589,22.53815;113.936145,22.533727;113.935822,22.532141;113.935948,22.528452;113.94023454348,22.527352051779;113.951776,22.527117;113.960819,22.526648;113.961082,22.532375;113.961532,22.537749;113.963041,22.540403;113.965574,22.54536;113.965538,22.548247;113.966203,22.55045;113.966221,22.551718;113.964963,22.554355;113.964514,22.556658;113.964262,22.559996;113.964316,22.566654;113.956735,22.567455;113.951111,22.567772;113.944859,22.567789;113.940511,22.568106",
"unit_price":96903,
"count":603
},
"611100857":{
"id":611100857,
"name":"前海",
"longitude":113.902236,
"latitude":22.522585,
"border":"113.921442,22.530155;113.921783,22.53401;113.922681,22.534102;113.922681,22.534812;113.921756,22.535145;113.92152027085,22.542509908711;113.921091,22.547396;113.920453,22.552194;113.919304,22.55408;113.918657,22.555314;113.917345,22.557217;113.916366,22.558827;113.912917,22.556099;113.909395,22.553345;113.895867,22.542973;113.895687,22.541287;113.89619,22.539885;113.896621,22.538416;113.896801,22.536514;113.895759,22.533343;113.894753,22.531907;113.891788,22.528719;113.886902,22.526282;113.88144,22.523678;113.879033,22.522376;113.875044,22.520473;113.872529,22.519071;113.877703,22.492093;113.883264,22.477374;113.890594,22.463181;113.893181,22.464316;113.892741,22.468666;113.894888,22.472357;113.896837,22.47588;113.89831,22.47613;113.898741,22.476356;113.899343,22.477408;113.901373,22.480864;113.90246,22.483018;113.902415,22.484254;113.90167,22.48468;113.900358,22.485882;113.898858,22.486583;113.899406,22.488169;113.899891,22.489772;113.899855,22.4916;113.899568,22.493504;113.898872,22.498304;113.899653,22.498629;113.900642,22.499773;113.901401,22.500491;113.904814,22.500858;113.907114,22.502661;113.909162,22.504164;113.910312,22.504398;113.91139,22.505065;113.912144,22.505766;113.912647,22.506201;113.913222,22.506935;113.913869,22.50777;113.914911,22.508571;113.91678,22.509907;113.919124,22.511063;113.919834,22.513917;113.919892,22.51769;113.918415,22.517786;113.916151,22.518771;113.917642,22.520156;113.91978,22.522201;113.920813,22.52503;113.920148,22.525139;113.921073,22.528844;113.922394,22.528961;113.922448,22.529829",
"unit_price":82473,
"count":928
},
"611100860":{
"id":611100860,
"name":"香蜜湖",
"longitude":114.033166,
"latitude":22.553766,
"border":"114.01539349671,22.553935878483;114.01617199339,22.553954836633;114.01692225999,22.553560084017;114.020949,22.551146;114.022206,22.549594;114.023195,22.547808;114.02546720361,22.541231309869;114.047179,22.544854;114.046586,22.548159;114.045832,22.551897;114.044934,22.556603;114.040729,22.559724;114.037467,22.559336;114.035598,22.559202;114.033802,22.559169;114.033658,22.563357;114.026267,22.563328;114.020607,22.561493;114.015325,22.559423",
"unit_price":121989,
"count":265
},
},
"visible_count":5363,
"total_count":40928
}
}
kjy.js文件
var kjyData = {
"errno":0,
"error":"",
"data":{
"list":{
"43":{
"id":"2411048971458",
"name":"科技園三十六區",
"longitude":113.95565020448,
"latitude":22.552100509472,
"unit_price":82281.2,
"count":6
},
"44":{
"id":"2411049006124",
"name":"桑達苑",
"longitude":113.95336371385,
"latitude":22.555938182151,
"unit_price":79116.5,
"count":6
},
},
"visible_count":959,
"total_count":40928
}
}
