首页 > 代码库 > 百度地图多边形画区域、获取节点经纬度坐标、判断某一点是否在此区域内

百度地图多边形画区域、获取节点经纬度坐标、判断某一点是否在此区域内

2024-10-05 14:31:02   214人阅读

创建可绘画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("点在多边形外")
                }
            }

 

百度地图多边形画区域、获取节点经纬度坐标、判断某一点是否在此区域内


联系
我们