APP-5-百度電子圍欄
阿新 • • 發佈：2019-02-14
max lock cti provide function enable -a 應用 style 
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"View Code></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>
2.模擬器測試
APP-5-百度電子圍欄