APP-5-百度电子围栏

itxm 2022年03月09日编程设计 193 0

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>