百度地圖（2）——繪出小區邊界
阿新 • • 發佈：2018-12-22
效果圖：
HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bmap_test</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的ak"></script> <!-- <script type="text/javascript" src="http://api.map.baidu.com/library/IndoorMap/1.0/src/indoor.min.js?v=1.0.1 "></script> --> <script type="text/javascript" src="./jQuery-1.10.2.js"></script> <script type="text/javascript" src="./demo.js"></script> </head> <body> <div id="contain" style="width: 100%;height: 500px;"></div> </body> </html>
js：
window.onload = function(){ var contain = document.getElementById('contain'); // 初始化地圖 var map = new BMap.Map(contain); var top_left_navigation = new BMap.NavigationControl(); //左上角，新增預設縮放平移控制元件 var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，新增比例尺 map.addControl(top_left_control); map.addControl(top_left_navigation); // 設定中心點座標和地圖級別 var center = new BMap.Point(113.270506,23.135308); //濱河花園113.7456,27.639319 map.centerAndZoom(center,19); map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放 //小區名稱 var XQ = '竹園小區'; //儲存小區邊界的經緯度 var boundaryPoints = { lng: [], lat: [], lngMin: 0, lngMax: 0, latMin: 0, latMin: 0, } //儲存過濾後的pois var filterPoisPoints = []; /** * 根據中心點獲取當前小區的uid */ var getLocalUid = function(){ var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.setMarkersSetCallback(function(pois){ map.clearOverlays(); console.log(pois); //畫小區邊界 var uid = pois[0].uid; drowBoundary(uid,pois); }) local.search(XQ); }; /** * 根據獲取到的uid，獲取小區邊界座標集合，畫多邊形 */ var drowBoundary = function(uid,pois){ $.ajax({ async: false, url:"http://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid="+uid, dataType:'jsonp', jsonp:'callback', success:function(result) { var content = result.content; if(content.geo != null && content.geo != undefined){ var geo = content.geo; var points = coordinateToPoints(geo); //point分組，得到多邊形的每一個點，畫多邊形 if (points && points.indexOf(";") >= 0) { points = points.split(";"); } var arr=[]; for (var i=0;i<points.length-1;i++){ var temp = points[i].split(","); arr.push(new BMap.Point(parseFloat(temp[0]),parseFloat(temp[1]))); boundaryPoints.lng.push(parseFloat(temp[0])); boundaryPoints.lat.push(parseFloat(temp[1])); } //建立多邊形 var polygon = new BMap.Polygon(arr, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5, }); map.addOverlay(polygon); //增加多邊形 map.setViewport(polygon.getPath()); //調整視野 }else{ console.log('暫無小區邊界資訊'); } //獲取小區邊界最大最小經緯度 getboundaryMinMaxLngLat(boundaryPoints); //過濾pois，去掉不在小區裡邊的點 filterPois(pois); //重新撒下小區中的點 for(var i=0;i<filterPoisPoints.length;i++){ var marker = new BMap.Marker(filterPoisPoints[i].point); map.addOverlay(marker); //閉包給每個marker新增點選事件 (function(i){ marker.addEventListener('click',function(){ console.log(filterPoisPoints[i].title) }); })(i); } }, timeout:3000 }); }; /** * 百度米制座標轉為經緯度 */ var coordinateToPoints = function(coordinate) { var points =""; if (coordinate) { var projection = BMAP_NORMAL_MAP.getProjection(); if (coordinate && coordinate.indexOf("-") >= 0) { coordinate = coordinate.split('-'); } //取點集合 var tempco = coordinate[1]; if (tempco && tempco.indexOf(",") >= 0) { tempco = tempco.replace(";","").split(","); } //分割點，兩個一組，組成百度米制座標 var temppoints=[]; for(var i = 0, len = tempco.length; i < len; i++){ var obj = new Object(); obj.lng=tempco[i]; obj.lat=tempco[i+1]; temppoints.push(obj); i++; } //遍歷米制座標，轉換為經緯度 for ( var i = 0, len = temppoints.length; i < len; i++) { var pos = temppoints[i]; var point = projection.pointToLngLat(new BMap.Pixel(pos.lng, pos.lat)); points += ([ point.lng, point.lat ].toString() + ";"); } } return points; } /** * 獲取小區邊界最大最小經緯度 */ var getboundaryMinMaxLngLat = function(boundaryPoints){ if (boundaryPoints && boundaryPoints.lng.length && boundaryPoints.lat.length) { boundaryPoints.lngMin = Math.min.apply(null,boundaryPoints.lng); boundaryPoints.lngMax = Math.max.apply(null,boundaryPoints.lng); boundaryPoints.latMin = Math.min.apply(null,boundaryPoints.lat); boundaryPoints.latMax = Math.max.apply(null,boundaryPoints.lat); } }; /** * 過濾pois，去掉不在小區裡邊的點 */ var filterPois = function(pois){ if (pois && pois.length && boundaryPoints && boundaryPoints.lng.length && boundaryPoints.lat.length && boundaryPoints.lngMin != 0 && boundaryPoints.lngMax != 0 && boundaryPoints.latMin != 0 && boundaryPoints.latMax != 0) { for (var i = pois.length - 1; i >= 0; i--) { if(pois[i].point.lng > boundaryPoints.lngMin && pois[i].point.lng < boundaryPoints.lngMax && pois[i].point.lat > boundaryPoints.latMin && pois[i].point.lat < boundaryPoints.latMax){ filterPoisPoints.push(pois[i]); } } } console.log('過濾後小區內座標') console.log(filterPoisPoints) }; getLocalUid(); }
缺點：有些小區沒有資料，無法描繪小區邊界！
需求： 獲取小區中的樓盤經緯度，從而描繪出小區樓盤效果圖！
希望有哪位大佬能幫我實現這個願望呢？？？？？