《移动端签到》——利用 JavaScript API实现定位

最新推荐文章于 2024-09-24 09:17:56 发布

周坤_66

最新推荐文章于 2024-09-24 09:17:56 发布

阅读量1.1w

点赞数 3

分类专栏： 3、web开发

本文链接：https://blog.csdn.net/zhoukun1008/article/details/51354570

版权

3、web开发专栏收录该内容

34 篇文章 1 订阅

订阅专栏

小编在做签到项目的时候，定位可是个不可缺少的功能，当我们签到时，我们只能在公司里签到，怎样判断你是否在公司里面哪——定位？定位可以将我们的详细的经纬度找出来，然后根据经纬度我们可以逆解析位置的详细信息，比如说哪个城市啦，街道地址等等。

手机定位大约分为两种：

1、GPS定位：通过接收卫星信号，直接得到手机的位置坐标。（不需要联网，可以完全离线定位，但是必须在天空比较开阔的地方，否则接收不到卫星信号。GPS定位，精度较高，可达到10米，但室内不可用，且超级费电。）。

2、网络定位：网络定位，分为wifi定位和基站定位，都是通过获取wifi或者基站信息，然后查询对应的wifi或者基站位置数据库，得到的定位地点。定位数据库可以不断完善不断补充，所以，越定位越准确。

2.1、WIFI定位：通过扫描手机周围的WIFI接入点，再把扫描到的接入点信息通过服务器对比，服务器再告诉手机所在的位置（这种定位方式需要互联网支持且WIFI要打开）。

2.2、基站定位：手机直接把自己所连接的基站以及能够扫描到的基站信息提供给服务器（比如中国移动的基站，每个基站间隔几百到几千米，每个基站都有自己的代码），再由服务器告知手机所在位置（也需要互联网支持）。

像浏览器定位、ip定位、经纬度定位、等等，这些都属于网络定位。今天小编给大家介绍一下浏览器定位。

HTML代码

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>浏览器定位</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>

JS代码

// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);

	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})
	//关于状态码
	//BMAP_STATUS_SUCCESS	检索成功。对应数值“0”。
	//BMAP_STATUS_CITY_LIST	城市列表。对应数值“1”。
	//BMAP_STATUS_UNKNOWN_LOCATION	位置结果未知。对应数值“2”。
	//BMAP_STATUS_UNKNOWN_ROUTE	导航结果未知。对应数值“3”。
	//BMAP_STATUS_INVALID_KEY	非法密钥。对应数值“4”。
	//BMAP_STATUS_INVALID_REQUEST	非法请求。对应数值“5”。
	//BMAP_STATUS_PERMISSION_DENIED	没有权限。对应数值“6”。(自 1.1 新增)
	//BMAP_STATUS_SERVICE_UNAVAILABLE	服务不可用。对应数值“7”。(自 1.1 新增)
	//BMAP_STATUS_TIMEOUT	超时。对应数值“8”。(自 1.1 新增)

我们还可以通过经纬度解析地址，有通过前台JS解析的，还有通过后台C#代码来实现的，不过原理差不多，大家看一下。

通过后台C#代码来解析地址

 public ActionResult GetAddress(string lat, string lng)
        {
            string strBuff = "";
            Uri httpURL = new Uri(string.Format("http://api.map.baidu.com/geocoder/v2/?ak=你的key值f&location={0},{1}&output=json&pois=0&coordtype=wgs84ll", lat, lng));
            //HttpWebRequest类继承于WebRequest，并没有自己的构造函数，需通过WebRequest的Creat方法 建立，并进行强制的类型转换   
            HttpWebRequest httpReq = (HttpWebRequest)WebRequest.Create(httpURL);
            ///通过HttpWebRequest的GetResponse()方法建立HttpWebResponse,强制类型转换   
            HttpWebResponse httpResp = (HttpWebResponse)httpReq.GetResponse();
            //GetResponseStream()方法获取HTTP响应的数据流,并尝试取得URL中所指定的网页内容   
            //若成功取得网页的内容，则以System.IO.Stream形式返回，若失败则产生ProtoclViolationException错 误。在此正确的做法应将以下的代码放到一个try块中处理。这里简单处理   
            Stream respStream = httpResp.GetResponseStream();
            //返回的内容是Stream形式的，所以可以利用StreamReader类获取GetResponseStream的内容，并以   
            //StreamReader类的Read方法依次读取网页源程序代码每一行的内容，直至行尾（读取的编码格式：UTF8）   
            StreamReader respStreamReader = new StreamReader(respStream, Encoding.UTF8);
            strBuff = respStreamReader.ReadToEnd();
            return Json(strBuff, JsonRequestBehavior.AllowGet);
        }

上面是以Json串的形式返回详细地址的。

通过JS直接逆解析

var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);//这里是我们要输入的经纬度
	map.centerAndZoom(point,12);
	var geoc = new BMap.Geocoder();    

	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
		});        
	});

上面就是具体的浏览器定位实例，还有通过IP定位，城市定位，大家可以去百度API或者高德API上看看，原理大致相同，但是网络定位相比GPS定位来说，确实不如GPS定位准确，要想定位准确，还是需要用GPS定位方式。