项目需求,需要精准定位,但是网上搜了好久都没有解决办法,当然微信定位的方案还是可行的,手机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;
版权声明:本文发布于与老涂一起写代码 内容均来源于互联网 如有侵权联系删除
快来评论,快来抢沙发吧~