APP-5-百度电子围栏

Posted 2021-02-09 学无止境

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了APP-5-百度电子围栏相关的知识，希望对你有一定的参考价值。

1.代码部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
        <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>
        <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
        <script src="../../js/mui.min.js"></script>    
        <script src="../../js/GeoUtils.js"></script>
        <link href="../../css/mui.min.css"  rel="stylesheet"/>
        <link href="../../css/iconfont.css" rel="stylesheet"/>
        
        <title>地图应用-电子围栏</title>
        
        <style type="text/css">
            body,
            html,
            #allmap {
                width: 100%;
                height: 95%;
                /*overflow: hidden;*/
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <header class="mui-bar mui-bar-nav"> 
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title mui-body-font">电子围栏</h1>
        </header>
        <div id="allmap">
            地图加载中。。。
        </div>  
        <div class="mui-content-padded">
            <button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="getGeocode()">
                获取定位信息
            </button>    
        </div>
    </body>
    <script type="text/javascript">
        var exchange = {
            enableHighAccuracy: true,
            coordsType: \'bd09ll\',
            timeout: 6000,
            maximumAge: 5000,
            provider: \'baidu\'
        };
        
        getlocation();

        function getlocation(){
            // 获取位置信息
            navigator.geolocation.getCurrentPosition(getinfo,exception,exchange);
        }
        
        function initMap(point){ 
            // 百度地图
            map = new BMap.Map("allmap");
            map.addControl(new BMap.NavigationControl());
            map.addControl(new BMap.ScaleControl());
            map.addControl(new BMap.OverviewMapControl());
            map.addControl(new BMap.MapTypeControl()); 
            map.centerAndZoom(point, 18);
            // 地图滚动大小
            map.enableScrollWheelZoom(true);
            // 创建标注
            var marker = new BMap.Marker(point);  
            // 将标注添加到地图中
            map.addOverlay(marker);          
            // 跳动的动画
            //marker.setAnimation(BMAP_ANIMATION_BOUNCE); 
            //添加多边形围栏
            var polygon = new BMap.Polygon([
                new BMap.Point(120.226000,30.215842),
                new BMap.Point(120.226794,30.214405),
                new BMap.Point(120.225867,30.214019),
                new BMap.Point(120.223995,30.213591),
                new BMap.Point(120.223787,30.214832)
            ], {
                strokeColor: "blue",
                strokeWeight: 6,
                strokeOpacity: 0.5
            }); 
            //创建多边形
            map.addOverlay(polygon);
            
            //围栏范围
            if(BMapLib.GeoUtils.isPointInPolygon(point, polygon)) {
                alert("在监控方位内");
            } else {
                alert("你已经逃离监控区域");
            }
        }
        
        function getinfo(p){
            var curlat = p.coords.latitude;
            var curlon = p.coords.longitude;
            var curadd = p.addresses;
            //坐标
            console.log(curlat + \',\' + curlon);
            var gpsPoint = new BMap.Point(curlon, curlat);
            //坐标转换   
            BMap.Convertor.translate(gpsPoint, 0, initMap); 
        }
        
        function exception(e){
            alert(e.Message);
        }
        
        function getGeocode(){
            getlocation();
        }
    </script>    
</html>

View Code

2.模拟器测试

以上是关于APP-5-百度电子围栏的主要内容，如果未能解决你的问题，请参考以下文章

实时即未来，车联网项目之电子围栏分析

实时即未来，大数据项目车联网之电子围栏分析任务设置十九

实时即未来，大数据项目车联网之电子围栏业务逻辑分析十八