百度地圖API 地圖圈區域並計算座標點是否在區域內
阿新 • • 發佈：2018-11-08
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> <script type="text/javascript" src="__PUBLIC__/admin/layer/layer.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LiFSZdkfPQkmwmWGb2gSyzA4b6BESUaP"></script> <!--載入滑鼠繪製工具--> <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"> <!--載入計算工具--> <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script> <!--載入檢索資訊視窗--> <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css"> </head> <body> <div style="margin-left: 50px;"> <lable><input type="text" id="suggestId" placeholder="請輸入關鍵字"></lable> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </div> <div id="map" style="width:1200px; height: 600px; margin-left: 50px;"></div> <ul> <table> <tr> <td>序號</td> <td>區域名稱</td> <td>顏色</td> <td>操作</td> </tr> <foreach name="positionList" item="v" key="k"> <tr> <td><{$k}></td> <td><{$v['name']}></td>
<!--動態設定選定區域的顏色--> <td><input type="text" value="<{$v['color']}>" onblur="upColor(<{$v['id']}>,$(this))"><span style="display: inline-block;width: 20px;height:20px;background-color:<{$v['color']}>"></span></td> <td>
<!--刪除資料中中的指定區域--> <a src="">刪除</a> </td> </tr> </foreach> </table> </ul> </body> <script>
//更新資料庫中的顏色 function upColor(id,event){ var color = event.val(); var id = id; $.ajax({ url:'<{:U("map/upColor")}>', type:'post', dataType:'json', data:{ color:color, id:id }, success:function(res){ if(res.status){ window.location.reload(); } } }); }
$(function(){
//例項化百度地圖 var map = new BMap.Map("map"); map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用 map.centerAndZoom("包頭",15); //設定地圖中心和地圖顯示等級 //頁面載入先後端請求區域座標點 並且迴圈在地圖畫出已選定區域 $.ajax({ url:'<{:U("map/poList")}>', type:'post', dataType:'json', success:function(res){ if(res){ console.log(res); var polygon = []; for(var i=0;i<res.length;i++){ var arr = []; for(var x=0; x<res[i]['position'].length;x++){ let poi = new BMap.Point(parseFloat(res[i]['position'][x].lng),parseFloat(res[i]['position'][x].lat)); arr.push(poi); } polygon[i] = new BMap.Polygon(arr, //設定區域樣式 {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,fillColor:res[i]['color'],fillOpacity:0.3} ); map.addOverlay(polygon[i]); } } } }); function G(id) { return document.getElementById(id); } //建立一個自動完成的物件 var ac = new BMap.Autocomplete({ "input" : "suggestId", "location" : map }); ac.addEventListener("onhighlight", function(e) { //滑鼠放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉列表後的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地圖上所有覆蓋物 function myFun(){ var pp = local.getResults().getPoi(0).point; //獲取第一個智慧搜尋的結果 map.centerAndZoom(pp, 16); map.addOverlay(new BMap.Marker(pp)); //新增標註 } var local = new BMap.LocalSearch(map, { //智慧搜尋 onSearchComplete: myFun }); local.search(myValue); } //右鍵選單 var menu = new BMap.ContextMenu(); var item1=new BMap.MenuItem("撤銷" ,function(location){ map.removeOverlay(overlays[overlays.length-1]);overlays.splice(overlays.length-1,1) }); menu.addItem(item1); map.addContextMenu(menu); var overlays = []; var overlaycomplete = function(e){ var position = []; overlays.push(e.overlay); //獲取多邊形端點座標 // if (e.drawingMode == BMAP_DRAWING_RECTANGLE ) { //alert(' 所畫的點個數：' + e.overlay.getPath().length); for(var i=0;i<e.overlay.getPath().length;i++){ let coordinate = new Object(); coordinate.lng = e.overlay.getPath()[i].lng; coordinate.lat = e.overlay.getPath()[i].lat; position.push(coordinate); // alert(" 點"+(i+1)+":經度"+e.overlay.getPath()[i].lng+" 緯度："+e.overlay.getPath()[i].lat); } //prompt層 // alert("面積："+BMapLib.GeoUtils.getPolygonArea(e.overlay)); // } //關閉繪製模式 drawingManager.close(); layer.prompt( {title: '新增區域名稱'}, function(val, index){ if(val!==''){ $.ajax({ url:'<{:U("map/pushPosition")}>', type:'post', dataType:'json', data:{ position:JSON.stringify(position), name:val }, success:function(res){ if(res.status){ layer.close(index); window.location.reload(); } } }); }else{ layer.close(index); } } ); }; //繪製樣式 var styleOptions = { strokeColor:"red", //邊線顏色。 fillColor:"red", //填充顏色。當引數為空時，圓形將沒有填充效果。 strokeWeight: 3, //邊線的寬度，以畫素為單位。 strokeOpacity: 0.8, //邊線透明度，取值範圍0 - 1。 fillOpacity: 0.6, //填充的透明度，取值範圍0 - 1。 strokeStyle: 'solid' //邊線的樣式，solid或dashed。 }; //例項化滑鼠繪製工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, //是否開啟繪製模式 enableDrawingTool: true, //是否顯示工具欄 drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 offset: new BMap.Size(5, 5), //偏離值 drawingModes: [//畫覆蓋物工具欄上顯示的可選項 BMAP_DRAWING_MARKER, BMAP_DRAWING_CIRCLE, BMAP_DRAWING_POLYLINE, BMAP_DRAWING_POLYGON, BMAP_DRAWING_RECTANGLE ] }, circleOptions: styleOptions, //圓的樣式 polylineOptions: styleOptions, //線的樣式 polygonOptions: styleOptions, //多邊形的樣式 rectangleOptions: styleOptions //矩形的樣式 }); //新增滑鼠繪製工具監聽事件，用於獲取繪製結果 drawingManager.addEventListener('overlaycomplete', overlaycomplete); function clearAll() { for(var i = 0; i < overlays.length; i++){ map.removeOverlay(overlays[i]); } overlays.length = 0 }
//座標點
var lng,lat;
point = [
new BMap.Point(lng,lat),
];
//計算座標point 是否在polygon區域中 介面使用請檢視百度地圖api
BMapLib.GeoUtils.isPointInPolygon(point[0],polygon[i]);
}) </script> </html>