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

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;

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