html5使用js确定用户坐标位置

阅读更多

最近在微信平台开发时，涉及到的问题。如何获取用户当前坐标位置。

微信用户坐标定位的实现方案

1、使用微信的共享位置，获取用户坐标。缺点：可能会需要用户手动点击获取位置，体验不好。优点：坐标比较精准 且用户可以手动调整位置；

2、使用html5的获取地理位置方案。缺点：坐标不太精准，且部分手机的微信浏览器不支持html5。优点：不需用户太多参与。

3、使用百度地图的ip定位。缺点：坐标差距太大，建议直接舍弃。

 

我这里采用了第二种方案，但是在获取过程种发现有时候判断不准确。

原来代码

var isSupportGeolLoc = navigator.geolocation ? true : false;
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		alert("你的手机不支持定位，现将转到自助设备列表页面!");
	        return;
	}

 在我的理解中，手机要么支持该服务，要么不支持。但是在实际的测试过程中发现，部分手机并不能正确提示，也不能有效获取对应的坐标。于是在网上搜索原因。原因如下

部分国行Android手机“阉割”了谷歌GMS服务包，导致HTML5的geolocation无法使用wifi和基站定位服务导致。

这个时候就会发现，假如你的手机支持浏览器定位但是你没有打开相关服务或者该服务对应的组件有问题，上面的代码均不能正确的显示当前坐标。重新修改代码为

$(window).load(function() {
	//是否支持定位的参数
	var isSupportGeolLoc = navigator.geolocation ? true : false;
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition,handleLocationError, 
		        {maximumAge:6000,timeout:5000, enableHighAccuracy:true}
		);
		//navigator.geolocation.getCurrentPosition(showPosition);
	}else{
		alert("你的手机不支持定位，现将转到自助设备列表页面!");
	        return;
	}
});

function handleLocationError(error){
   switch(error.code){
	   case error.TIMEOUT:
		   alert("获取位置信息超时！");
	       break;
	  case error.PERMISSION_DENIED:
		   alert("您设置了阻止该页面获取位置信息！");
	       break;
	  case error.POSITION_UNAVAILABLE:
		   alert("浏览器无法确定您的位置！");
	       break;
	  default:
		  alert("获取位置信息出错！");
	      break;
   }
}

 此时即可正常处理不同的业务了。