HTML5的定位接口

当打开地图首先想知道的自己的位置。通过设备获取位置的手段有三类 GPS，LBS，IP地址。GPS是基于卫星的方式，生活中并不常用。LBS是依靠基站信号通过定位算法获取位置的方式，算是最常用的一类方式。IP地址定位听起来有些陌生，但是也是一种常用的定位方式，只要你的手机通过WIFI连入网络时基本都会用到IP地址定位
挺早以前就在Google Map上见识过IP定位，感觉很神奇，我电脑上也没有GPS，也没有GMS 它是怎么获取我的位置。查了些资料才知道这叫做IP定位。当时Google Map中这个定位的偏差还挺大，定位功能按钮只是个很不显眼的小点。点击按钮后浏览器都会有个安全提示（google 想要跟踪你的实际位置）心虚的人一般都不会允许。如下图
HTML5的定位接口

在Chorme 和Firefox中会有如下提示。选择允许后都可以在地图上进行定位。

Chorme 浏览器	Firefox浏览器

现在我在百度地图和高德地图上都没找到定位的功能按钮，挺奇怪的，不过它们的地图API中却都提供了IP定位的接口。下面我写了一个程序对HTML5，百度定位接口，高德定位接口进行了对比测试。

// 验证浏览器
function isGeolocationAPIAvailable() {
    var location = "您的浏览器不支持IP定位！请使用IE10以上版本或者Chorme浏览";
    if (window.navigator.geolocation) {
        location = "您的浏览器支持IP定位！";
        nav = window.navigator;
    }
    document.getElementById("hint").innerHTML = location;
}

//调用HTML5接口实现IP定位 
function requestPosition() {
    if (nav != null) {
        var geoloc = nav.geolocation;
        if (geoloc != null) {
            geoloc.getCurrentPosition(successCallback);
        } else {
            alert("你的浏览器不支持 HTML5的Geolocation API！");
        }
    } else {
        alert("Navigator对象没有发现！");
    }
}
//监听IP位置变化 可以哟个clearwatch 结束监听
function listenForPositionUpdates() {
    if (nav != null) {
        var geoloc = nav.geolocation;
        if (geoloc != null) {
            watchID = geoloc.watchPosition(successCallback);
        } else {
            alert("你的浏览器不支持 HTML5的Geolocation API！");
        }
    } else {
        alert("Navigator对象没有发现！");
    }
}

var acc; //误差变量
//IP定位的回调函数；
function successCallback(position) {
    var x = position.coords.longitude;
    var y = position.coords.latitude;
    acc = position.coords.accuracy;
    document.getElementById("xy").value = y + "," + x;
    gmapurl = gmapurl + y + "," + x + "&zoom=19&size=400x400&sensor=false"
    var gpsPoint = new BMap.Point(x, y);
    //将GPS坐标进行转换，返回和百度地图匹配的坐标
    BMap.Convertor.translate(gpsPoint, 0, translateCallback); //真实经纬度转成百度坐标

}

效果如下： http://jsfiddle.net/wlygis/8aNwp/embedded/result,js/

（点击图片打开调试界面）

经过对比较我发现，其实百度高德的定位接口都是封装了HTML5的位置接口。定位出来的结果相同，如果只是想是使用一下IP定位这个功能的朋友完全可以直接使用HTML5来实现，可以省去使用第三方的类库。注意：HTML5返回的坐标数据是WGS84坐标系统的数据。国内在线地图都是经过位置偏移的，如果需要地图上标注，需要使用地图厂家提供的 GPS数据转换接口进行转换才能够在地图上正确显示。 Google Map就没有做这个转换，我对HTML5返回的坐标数据进行了测试，在Google Earth上查询的结果和Google Map中查询的位置不一致，Google Earth的结果和百度和高德地图上显示的是一致的，这说明Google Map和其他国内在线地图一样，对显示的数据做了偏移处理。但是在标记HTML5返回的位置时没有做偏移处理。这个比较遗憾，惟一有定位功能的地图还不能正确标记位置。最后说说这个IP定位精度，我自己使用的感受就是IP定位有些时候准的惊人，有些时候偏的离谱。导致这个问题的原因，主要是IP定位并不是依靠你设备的IP或者说MAC进行定位，而是通过设备访问公网的路由进行定位的。一般你看到的定位结果是你上网入口的路由所在的地址。随着智能路由的普及这种定位方式会越来越准确。做社区LBS应用的同学们可以仔细想想如何把这个技术应用起来。好就写到这了欢迎留言交流。

如果大家想进一步了解HTML5定位接口详细内容可以参考

http://www.w3schools.com/HTML/html5_geolocation.asp

LBS公众帐号：LBSNew 二维码 HTML5的定位接口

本文原创：欢迎转载请注明来源作者wlygis。

秒客网

HTML5的定位接口

相关文章