HTML5的定位接口
2014-04-21 17:10
183 查看
当打开地图首先想知道的自己的位置。通过设备获取位置的手段有三类 GPS,LBS,IP地址。GPS是基于卫星的方式,生活中并不常用。LBS是依靠基站信号通过定位算法获取位置的方式,算是最常用的一类方式。IP地址定位听起来有些陌生,但是也是一种常用的定位方式,只要你的手机通过WIFI连入网络时基本都会用到IP地址定位
挺早以前就在Google Map上见识过IP定位,感觉很神奇,我电脑上也没有GPS,也没有GMS 它是怎么获取我的位置。查了些资料才知道这叫做IP定位。当时Google Map中这个定位的偏差还挺大,定位功能按钮只是个很不显眼的小点。 点击按钮后浏览器都会有个安全提示(google 想要跟踪你的实际位置) 心虚的人一般都不会允许。如下图
在Chorme 和Firefox中会有如下提示。 选择允许后都可以在地图上进行定位。
现在我在百度地图和高德地图上都没找到定位的功能按钮,挺奇怪的,不过它们的地图API中却都提供了IP定位的接口。 下面我写了一个程序对HTML5,百度定位接口,高德定位接口进行了对比测试。
效果如下: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 二维码
本文原创:欢迎转载 请注明来源作者wlygis。
挺早以前就在Google Map上见识过IP定位,感觉很神奇,我电脑上也没有GPS,也没有GMS 它是怎么获取我的位置。查了些资料才知道这叫做IP定位。当时Google Map中这个定位的偏差还挺大,定位功能按钮只是个很不显眼的小点。 点击按钮后浏览器都会有个安全提示(google 想要跟踪你的实际位置) 心虚的人一般都不会允许。如下图
在Chorme 和Firefox中会有如下提示。 选择允许后都可以在地图上进行定位。
Chorme 浏览器 | Firefox浏览器 |
// 验证浏览器 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 二维码
本文原创:欢迎转载 请注明来源作者wlygis。
相关文章推荐
- html5中地理位置定位api接口开发应用小结
- html5地理位置定位API接口开发
- 从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存
- HTML5地理位置定位API接口开发
- HTML5 地理位置定位 API 接口开发
- html5中地理位置定位api接口开发应用:
- Android调用百度地图Web端接口,实现百度定位、导航
- HTML5-桌面式web应用-地理定位, webworker, 会话历史
- HTML5的geolocation 浏览器定位
- 使用HTML5里页面可见性接口判断用户是否正在观看你的页面
- 基站定位接口说明
- 设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇)
- 基站定位接口
- provider: SQL 网络接口, error: 26 - 定位指定的服务器/实例时出错
- 类google json基站定位接口
- HTML5调用百度地图API进行地理定位实例 ,定位当前位置
- 第182天:HTML5——地理定位
- HTML5:footer定位(底部+居中)的探讨+div图片居中问题
- HTML5地理定位实例
- HTML5回调函数与地理定位