1.代码部分

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.  
  7.         <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
  8.         <script src="http://api.map.baidu.com/api?v=2.0&ak=PG4DBjFTHfawSwT10GLLn4YZhQCmGYGA"></script>
  9.         <script src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>
  10.         <script src="../../js/mui.min.js"></script>
  11.         <script src="../../js/GeoUtils.js"></script>
  12.         <link href="../../css/mui.min.css"  rel="stylesheet"/>
  13.         <link href="../../css/iconfont.css" rel="stylesheet"/>
  14.  
  15.         <title>地图应用-电子围栏</title>
  16.  
  17.         <style type="text/css">
  18.             body,
  19.             html,
  20.             #allmap {
  21.                 width: 100%;
  22.                 height: 95%;
  23.                 /*overflow: hidden;*/
  24.                 font-family: "微软雅黑";
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <header class="mui-bar mui-bar-nav">
  30.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  31.             <h1 class="mui-title mui-body-font">电子围栏</h1>
  32.         </header>
  33.         <div id="allmap">
  34.             地图加载中。。。
  35.         </div>
  36.         <div class="mui-content-padded">
  37.             <button type="button" class="mui-btn mui-btn-block mui-btn-primary" onclick="getGeocode()">
  38.                 获取定位信息
  39.             </button>
  40.         </div>
  41.     </body>
  42.     <script type="text/javascript">
  43.         var exchange = {
  44.             enableHighAccuracy: true,
  45.             coordsType: 'bd09ll',
  46.             timeout: 6000,
  47.             maximumAge: 5000,
  48.             provider: 'baidu'
  49.         };
  50.  
  51.         getlocation();
  52.  
  53.         function getlocation(){
  54.             // 获取位置信息
  55.             navigator.geolocation.getCurrentPosition(getinfo,exception,exchange);
  56.         }
  57.  
  58.         function initMap(point){
  59.             // 百度地图
  60.             map = new BMap.Map("allmap");
  61.             map.addControl(new BMap.NavigationControl());
  62.             map.addControl(new BMap.ScaleControl());
  63.             map.addControl(new BMap.OverviewMapControl());
  64.             map.addControl(new BMap.MapTypeControl());
  65.             map.centerAndZoom(point, 18);
  66.             // 地图滚动大小
  67.             map.enableScrollWheelZoom(true);
  68.             // 创建标注
  69.             var marker = new BMap.Marker(point);
  70.             // 将标注添加到地图中
  71.             map.addOverlay(marker);
  72.             // 跳动的动画
  73.             //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
  74.             //添加多边形围栏
  75.             var polygon = new BMap.Polygon([
  76.                 new BMap.Point(120.226000,30.215842),
  77.                 new BMap.Point(120.226794,30.214405),
  78.                 new BMap.Point(120.225867,30.214019),
  79.                 new BMap.Point(120.223995,30.213591),
  80.                 new BMap.Point(120.223787,30.214832)
  81.             ], {
  82.                 strokeColor: "blue",
  83.                 strokeWeight: 6,
  84.                 strokeOpacity: 0.5
  85.             });
  86.             //创建多边形
  87.             map.addOverlay(polygon);
  88.  
  89.             //围栏范围
  90.             if(BMapLib.GeoUtils.isPointInPolygon(point, polygon)) {
  91.                 alert("在监控方位内");
  92.             } else {
  93.                 alert("你已经逃离监控区域");
  94.             }
  95.         }
  96.  
  97.         function getinfo(p){
  98.             var curlat = p.coords.latitude;
  99.             var curlon = p.coords.longitude;
  100.             var curadd = p.addresses;
  101.             //坐标
  102.             console.log(curlat + ',' + curlon);
  103.             var gpsPoint = new BMap.Point(curlon, curlat);
  104.             //坐标转换
  105.             BMap.Convertor.translate(gpsPoint, 0, initMap);
  106.         }
  107.  
  108.         function exception(e){
  109.             alert(e.Message);
  110.         }
  111.  
  112.         function getGeocode(){
  113.             getlocation();
  114.         }
  115.     </script>
  116. </html>

2.模拟器测试

APP-5-百度电子围栏的更多相关文章

  1. App之百度云推送

    集成SDK 下载最新的Android SDK压缩包并解压,在新建工程或已有工程中增加百度云推送功能. 我下载的是 ,里面有一个同名的文件夹,文件夹中有 导入云推送jar包和so文件: 将解压后的lib ...

  2. Android 给app加入百度地图

    1.获取sha1值 (1)win+R进入cmd窗口 (2)输入以下代码 C:\SoftApplication\javajdk\jdk1.8.0_151\bin>keytool -list -v ...

  3. 调用百度、高德地图App，百度地图网页版，App定位

    https://www.jianshu.com/p/296a3995adc2 https://blog.csdn.net/qq_26598821/article/details/51087785 ht ...

  4. Ocr答题辅助神器 OcrAnswerer4.x，通过百度OCR识别手机文字，支持屏幕窗口截图和ADB安卓截图，支持四十个直播App,可保存题库

    http://www.cnblogs.com/Charltsing/p/OcrAnswerer.html 联系qq:564955427 最新版为v4.1版,开放一定概率的八窗口体验功能,请截图体验(多 ...

  5. Android百度地图附加搜索和公交路线方案搜索

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入) Q  Q:408365330     E-Mail:egojit@qq.com 综述: 今 ...

  6. 在一个老外微信PM的眼中，中国移动App UI那些事儿

    本文编译自Dan Grover的博客,他现在是腾讯微信的产品经理.以下是他从旧金山搬到广州后的近半年时间里,在试用过微信微博等中国主流移动App后,总结出的中美App在设计理念上的差异,并对中国移动A ...

  7. 改写百度云推送SDK，PHP PEAR 包：Services_Baidu_Push

    iPhone使用apple push很方便,而Android很多厂商删除了google push,而且google在大陆连不上,所以要用别的办法. Android常见的推送服务商有:极光推送(http ...

  8. 【转】十二个移动App云测试服务盘点

    随着移动设备.操作系统版本的碎片化,测试工作对于移动开发团队而言越来越成为一个沉重的包袱,不过这也带来了商机,现在市场上有不少服务和平台提供云测试工具,可以对移动App进行自动化测试,提供测试报告和优 ...

  9. 开发APP不搞清楚这20个问题，必然沦为一场灾难

    移动经济的高速增长极大刺激了企业和个人的APP开发热情,从卖野山鸡的到卖无人机的,从老大妈到小正太都跃跃欲试,更不要说那些传统企业的信息主管们了. 面对今天如过江之鲫的APP市场,很少有人意识到,移动 ...

  10. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...

随机推荐

  1. MyBatis 别名标签 & sql的复用

    1.MyBatis 别名标签 如果在映射文件中,大量使用类名比较长,可以在sqlMapConfig.xml声明别名, 在映射文件中可以使用别名缩短配置,注意此配置要放在最前面 sqlMapConfig ...

  2. 廖雪峰Java1-2程序基础-9数组

    数组初识 1.数组的特点: 数组所有元素初始化默认值,int默认值为0 数组创建后大小不可改变 数组索引从0开始 数组是引用类型 使用索引下标访问数组元素,索引超出范围会报错 2.数组的定义: 类型[ ...

  3. qsort实现结构体数组排序

    要注意强制转换 #include <stdio.h> #include <stdlib.h> typedef struct{ int num; char name[20]; f ...

  4. oracle数据库归档与非归档

    oracle运行的时候至少需要两组联机日志,每当一组日志写满后会发生日志切换,继续向下一组联机日志写入. 如果是归档模式,则会触发ARCn进程,把切换后的重做日志文件复制到归档日志文件. 如果是非归档 ...

  5. keystone认证服务

    实验操作平台:OpenStack单节点操作 一.相关概念 1.认证(authentication) 认证是确认允许一个用户访问的进程 2.证书(credentials) 用于确认用户身份的数据 3.令 ...

  6. datetime模块常用功能小结

  7. Jmeter（十八）Logic Controllers 之 Random Controller and Random order Controller

    Random Controller就比较简单了,完全随机!毫无章法. 毫无任何规律的运行. 还有一个Random order Controller,随机顺序控制器就像一个简单的控制器,它将最多执行一次 ...

  8. androidstudio在创建new project时，窗口太大，看不到下面确定按钮的解决方法

    点击File-->setting-->Appearance将里面的Override default fonts by(not recommended)打钩去掉. 这个是目前找到唯一办法.

  9. springmvc+mybatis+redis的session共享+maven管理

    负载均衡搭建:http://www.cnblogs.com/guoyansi19900907/p/8717746.html redis安装:http://www.cnblogs.com/guoyans ...

  10. U3d学习001-RollBox例子

    1.世界坐标系和局部坐标系(参照物坐标系)——以参照物为父物体节点  2.刚体组件:       获得GetComponent<Rigidbody>();     移动AddForce(n ...