百度地图多边形画区域、获取节点经纬度坐标、判断某一点是否在此区域内
创建可绘画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);
var isIn = ptInPolygon(data.poi.location.lng, data.poi.location.lat); //非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 tobdMap(x, y) { var x_pi = 3.14159265358979324 * 3000.0 / 180.0; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); var bd_lon = z * Math.cos(theta) + 0.0065; var bd_lat = z * Math.sin(theta) + 0.006; var pt =new BMap.Point(bd_lon, bd_lat); return pt; }
function ptInPolygon(x, y){ 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 pt = tobdMap(x, y); var result = BMapLib.GeoUtils.isPointInPolygon(pt, ply); if(result == true){ return true; //alert("点在多边形内"); } else { return false; //alert("点在多边形外") } }
以上是利用高德地图来实现一个下拉框的地址选择来获取地址，使用前要导入js：<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key="></script> 将key的值填入自己申请得到的就可以了
