APP-5-百度电子围栏 _电子

临文乍了了，彻卷兀若无。这篇文章主要讲述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="http://img.readke.com/220514/043K14344-2.jpg"> < /script> < script src="http://img.readke.com/220514/043K15915-3.jpg ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"> < /script> < script src="http://img.readke.com/220514/043K13b3-4.jpg"> < /script> < script src="https://www.songbingjia.com/js/mui.min.js"> < /script> < script src="https://www.songbingjia.com/js/GeoUtils.js"> < /script> < link href="https://www.songbingjia.com/css/mui.min.css"rel="stylesheet"/> < link href="https://www.songbingjia.com/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 Code2.模拟器测试