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>
2.模拟器测试
