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

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. 廖雪峰Java5集合-1Java集合简介-1Java结合简介

    1.集合 定义:集合就是一堆东西.集合里的东西,称为元素Element 数学中的集合: 有限集合: * 一个班所有的学生组成的集合 * 一个网站所有的商品组成的集合 无限集合: * 全体自然数集合 * ...

  2. 廖雪峰Java1-3流程控制-5循环

    while循环 while循环首先判断条件: 条件满足时循环:条件不满足时退出循环 如果一开始条件就不满足,一次都不循环.如while false int sum = 0; int n = 1; wh ...

  3. sqlserver数据库设计完整性与约束

    use StudentManageDB go --创建主键约束 if exists(select * from sysobjects where name='pk_StudentId') alter ...

  4. 2018年1月 attribute VS prop 动画渲染

    attribute和prop和UI存在单向/双向绑定关系,参考 https://m.aliyun.com/yunqi/articles/31499 渲染流程 重绘和重排 ? requestAnimat ...

  5. 俞敏洪：我创业24年感悟的3条CEO守则

    转自:http://www.gamelook.com.cn/2017/10/306603 创业24年,他的创业经历被拍成了电影.在一次小范围聚会时,他说现实远比剧本要精彩.“如果让我一切从头开始,我会 ...

  6. 给 Windows 文件菜单添加 "用XX程序打开" "用XX编辑" "用XX运行"

    有什么用就不用多说了,这可是个很有用的技巧.可以创造自己的文件格式,也可以给已有的文件添加多种打开方式 在注册表[HKEY_CLASSES_ROOT]下找到或者建立对应的扩展名 如果想对所有文件都生效 ...

  7. gulp 编译es6 探究

    1.gulp配置: var gulp = require('gulp') var fs = require("fs") var babelify = require('babeli ...

  8. json及JavaBean转json

    先来看看JSON: 什么是JSON: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在Ser ...

  9. Java动手及实验整理

    1   枚举类型 在Java中,枚举类型本质上其实就是一个类,枚举中的常量都是该枚举类型的实例.枚举类型是引用类型!枚举不属于原始数据类型,它的每个具体值都引用一个特定的对象.相同的值则引用同一个对象 ...

  10. css居中问题：水平居中、垂直居中

    亲们支持我的新博客哦==>原文地址 ) 本篇文章所有演示代码下载==>github/calamus0427 css水平垂直居中是面试时候遇到最多的问题,我总结一下大部分解决方案 水平居中: ...