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