百度地图多边形画区域获取节点经纬度坐标判断某一点是否在此区域内
Posted binTke
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图多边形画区域获取节点经纬度坐标判断某一点是否在此区域内相关的知识，希望对你有一定的参考价值。
创建可绘画map：
1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 7 <meta name="apple-mobile-web-app-capable" content="yes"> 8 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 9 10 <title>修改行程</title> 11 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=egB5ZksTobqA5szp6CLsd6QpTrOU9qkG"></script> 13 <!--加载鼠标绘制工具--> 14 <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> 15 <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> 16 <script type="text/javascript"> 17 18 </script> 19 </head> 20 21 <body> 22 <div> 23 <div id="allmap" style="padding-top: 80%;"></div> 24 <div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div> 25 </div> 26 <div id="result"> 27 <input type="button" value="获取绘制的覆盖物个数" onclick="alert(overlays.length)"/> 28 <input type="button" value="获取绘制的所有点" onclick="getPoint()"/> 29 <input type="button" value="清除所有覆盖物" onclick="clearAll()"/> 30 </div> 31 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9f43339f3d167d6ee461b722f7f029db"></script> 32 <script> 33 34 // 百度地图API功能 35 //var map = new BMap.Map(‘map‘); 36 //var poi = new BMap.Point(116.307852,40.057031); 37 //map.centerAndZoom(poi, 16);//设置中心点坐标和地图级别 38 //map.enableScrollWheelZoom(); //启用鼠标滚动对地图放大缩小 39 40 var map = new BMap.Map("allmap"); 41 map.centerAndZoom(new BMap.Point(119.297870,26.067995),16); 42 map.enableScrollWheelZoom(true); 43 44 //鼠标绘制完成回调方法 获取各个点的经纬度 45 var overlays = []; 46 var overlaycomplete = function(e){ 47 overlays.push(e.overlay); 48 var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组 49 for(var i=0;i<path.length;i++){ 50 console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat); 51 } 52 }; 53 var styleOptions = { 54 strokeColor:"red", //边线颜色。 55 fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。 56 strokeWeight: 3, //边线的宽度，以像素为单位。 57 strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。 58 fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。 59 strokeStyle: ‘solid‘ //边线的样式，solid或dashed。 60 } 61 //实例化鼠标绘制工具 62 var drawingManager = new BMapLib.DrawingManager(map, { 63 isOpen: false, //是否开启绘制模式 64 enableDrawingTool: true, //是否显示工具栏 65 drawingMode:BMAP_DRAWING_POLYGON,//绘制模式 多边形 66 drawingToolOptions: { 67 anchor: BMAP_ANCHOR_TOP_RIGHT, //位置 68 offset: new BMap.Size(5, 5), //偏离值 69 drawingModes:[ 70 BMAP_DRAWING_POLYGON 71 ] 72 }, 73 polygonOptions: styleOptions //多边形的样式 74 }); 75 76 //添加鼠标绘制工具监听事件，用于获取绘制结果 77 drawingManager.addEventListener(‘overlaycomplete‘, overlaycomplete); 78 function clearAll() { 79 for(var i = 0; i < overlays.length; i++){ 80 map.removeOverlay(overlays[i]); 81 } 82 overlays.length = 0; 83 } 84 function getPoint() { 85 debugger; 86 var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组 87 for(var i=0;i<path.length;i++){ 88 console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat); 89 } 90 } 91 </script> 92 <style> 93 .amap-sug-result { 94 position: fixed; 95 z-index: 1024; 96 background-color: #fefefe; 97 border: 1px solid #d1d1d1; 98 visibility: hidden; 99 } 100 .mui-popup-title+.mui-popup-text { 101 text-align: left; 102 } 103 </style> 104 </body> 105 106 </html>
以上HTML抓取地点后可在浏览器调试模式下的控制台获取节点经纬度坐标，以下是判断某一点是否在所抓取的区域内（当然，方法中的构建区域要根据自己抓取的目标来更换）：
// 地址自动完成 AMap.plugin(‘AMap.Autocomplete‘, function() { var endcomplete = new AMap.Autocomplete({ city: ‘福州‘, input: ‘end-place‘, datatype: ‘poi‘ }); AMap.event.addListener(endcomplete, "select", function(data) { select_txt=data.poi.name; if(select_txt.charAt(select_txt.length-1,1) == ‘镇‘){ mui.alert(‘无匹配地址，请选择就近位置‘, ‘参数错误‘); } var pt =new BMap.Point(data.poi.location.lng, data.poi.location.lat); var isIn = ptInPolygon(pt); //非5区的重选 if(data.poi.adcode==350102||data.poi.adcode==350111||data.poi.adcode==350103||data.poi.adcode==350104||data.poi.adcode==350105 || isIn){ sfxz=1; via_place_data[‘end-place‘] = { address: data.poi.name, lat: data.poi.location.lat, lng: data.poi.location.lng, adcode:data.poi.adcode }; }else{ mui.alert(‘当前仅限市内五区及大学城范围，请重新选择地址‘, ‘参数错误‘); sfxz = 0; return; } }); }); function ptInPolygon(pt){ var pts = []; var pt1 = new BMap.Point(119.214795, 26.019238); var pt2 = new BMap.Point(119.230749, 26.024693); var pt3 = new BMap.Point(119.210914, 26.078185); var pt4 = new BMap.Point(119.196829, 26.086622); var pt5 = new BMap.Point(119.182456, 26.080911); var pt6 = new BMap.Point(119.180587, 26.065464); var pt7 = new BMap.Point(119.198266, 26.035861); pts.push(pt1); pts.push(pt2); pts.push(pt3); pts.push(pt4); pts.push(pt5); pts.push(pt6); pts.push(pt7); var ply = new BMap.Polygon(pts); //var pt =new BMap.Point(116.400, 39.914); var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply); if(result == true){ return true; //alert("点在多边形内"); } else { return false; //alert("点在多边形外") } }
以上是关于百度地图多边形画区域获取节点经纬度坐标判断某一点是否在此区域内的主要内容，如果未能解决你的问题，请参考以下文章