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

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

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

下面给出代码:

显示获取定位的信息

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;

特别注意:这个是必须用户授权定位,才能获取经纬度,不授权不能获取地理经纬度,也就无法获取详细地址。


版权声明:本文为weixin_33812391原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。