HTML5 地理定位 geolocation

最新推荐文章于 2024-06-20 16:52:52 发布

蒲公英芽

最新推荐文章于 2024-06-20 16:52:52 发布

阅读量325

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/Charissa2017/article/details/104680455

版权

html5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

geolocation 地理定位

HTML5 Geolocation 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

Geolocation 获取的信息可能会不准，再有就是chrome 浏览器已经不支持返回用户的定位信息。所以在实际项目中获取用户定位一般都是将用户的IP地址传给服务器，服务器用IP来定位，再将信息返给客户端。

1、判断用户浏览器是否支持该功能，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

init();
function init() {
    if (navigator.geolocation) {
    	//浏览器支持geolocation
        navigator.geolocation.getCurrentPosition(showPosition,showError);
    }else{
    	//不支持
        document.write("Geolocation is not supported by this browser.")
    }
}

2、通过 navigator.geolocation.getCurrentPosition()，获取定位信息。
chrome 浏览器不支持定位定位信息的获取。

function showPosition(position){
    console.log(position);//打印结果如下图
    let lati=position.coords.latitude;//纬度
    let longi=position.coords.longitude;//经度
    document.write("经度："+longi+"，纬度："+lati);
}
function showError(e){
    console.log(e);//错误信息
}

getCurrentPosition() 打印结果：
geolocation
3、获取失败返回的数据

function showError(e){
    console.log(e);//错误信息，打印结果如下图
	switch(e.code){
        case 1:
         console.log("用户拒绝请求定位")
         break;
         case 2:
         console.log("位置信息不可用")
         break;
         case 3:
         console.log("请求超时")
         break;
     }
}

错误信息打印结果：
geolocation
4、使用百度地图API，因为是跨域请求，这里使用 jsonp 来获取用户的具体位置信息。

function showPosition(position){
    //拼接参数
    let location=position.coords.latitude+","+position.coords.longitude;
    //jsonp请求
    let scriptDom=document.createElement("script");
    scriptDom.src=`http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=${location}&output=json&pois=0`;
    document.body.appendChild(scriptDom);
}
//执行回调函数
function renderReverse(e){
    console.log(e);//打印结果如下
    document.write("您的位置为："+e.result.formatted_address);
    
}