与老涂一起写代码

手机端H5地理定位结合腾讯地图API实现精准定位!

admin 178 ℃ 0 条
手机端H5地理定位结合腾讯地图API实现精准定位!

项目需求,需要精准定位,但是网上搜了好久都没有解决办法,当然微信定位的方案还是可行的,手机H5 就没有这方面的教程了。

捣鼓好久啊,花了一早上的时间研究出来了。这里有个大坑,要开启手机的定位才能获取地理位置!

下面给出代码:

<h3 id="geo">显示获取定位的信息</h3>

function gourl(url){
	
	 
	var xhr = new XMLHttpRequest();
	 
	xhr.open("POST", url, true);
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xhr.onreadystatechange = function(){
		
		var XMLHttpReq = xhr;
		/**
			XMLHttpReq.readyState
		 0: 请求未初始化
		 1: 服务器连接已建立
		 2: 请求已接收
		 3: 请求处理中
		 4: 请求已完成,且响应已就绪
		**/
		if (XMLHttpReq.readyState == 4) {
			if (XMLHttpReq.status == 200) {                
				var data = XMLHttpReq.responseText;
			   // alert(data)
			   // console.log(data);
			   // var json = JSON.parse(JSON.parse(data));
			   var json = JSON.parse(data);
			   alert(json.result.address);
				
			}else if(XMLHttpReq.status == 100){
			
			}else if(XMLHttpReq.status == 300){
			
			}else if(XMLHttpReq.status == 400){
			
			}else if(XMLHttpReq.status == 500){
			
			}else if(XMLHttpReq.status == 0){
				/** 0不是http协议的状态,关于XMLHttpReq.status的说明:
				1、If the state is UNSENT or OPENED, return 0.(如果状态是UNSENT或者OPENED,返回0)
				2、If the error flag is set, return 0.(如果错误标签被设置,返回0)
				3、Return the HTTP status code.(返回HTTP状态码)
				第一种情况,例如:url请求的是本地文件,状态会是0
				第二种情况经常出现在跨域请求中,比如url不是本身网站IP或域名,例如请求www.baidu.com时
				第三种,正常请求本站http协议信息时,正常返回http协议状态值
				**/
			}
			
		}
	};
	alert(111);
	xhr.send();
}

var geo = document.getElementById('geo');
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(
	function(ev){

		var latitude = ev.coords.latitude;
		var longitude =ev.coords.longitude;
		geo.innerHTML = '纬度:'+latitude+' 经度:'+longitude;
				
		alert('纬度:'+latitude+' 经度:'+longitude);
		 var url = "http://定位接口地址/?lat="+latitude+"&lng="+longitude;
		 gourl(url);
		 
		createMap(latitude,longitude);
		  
	},
	function(error){
		switch(error.code)
		{
			case error.PERMISSION_DENIED:
				geo.innerHTML="用户拒绝共享地理位置信息"
				break;
			case error.POSITION_UNAVAILABLE:
				geo.innerHTML="无法获取当前位置"
				break;
			case error.TIMEOUT:
				geo.innerHTML="操作超时"
				break;
			case error.UNKNOWN_ERROR:
				geo.innerHTML="其他错误"
				break;
		}
	})
}
else{
alert('该浏览器不支持');
}

PHP函数API转换经纬度,获得详细地址信息。上面的接口地址就是请求这里:

$ip_tencent_api = 'https://apis.map.qq.com/ws/geocoder/v1/?location='.$_GET['lat'].','.$_GET['lng'].'&key=你申请的腾讯地图key';

$res = file_get_contents($ip_tencent_api);
echo $res;exit;


发表评论 (已有0条评论)

快来评论,快来抢沙发吧~