娄底28生活网   切换城市   |   您好,欢迎来到娄底28生活网!
今天是:
 
生活百科
 
 
leo
  8级
帖子:48
精华:0
积分:96
注册:2015-12-14

 

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

浏览:6042 次   |   倒序看帖 楼主    1 楼
JS获取定位信息
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;

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

 
 
 
|< < >
 
我来回复:
 
您需要登录后才可以回帖 登录注册