如何使用HTML5地理位置定位功能
投稿：hebedich
字体：[ ] 类型：转载 时间：
用相对简单的JavaScript代码，可以创建出能确定用户地理位置详细信息的Web应用，包括经纬度以及海拔等。一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能，其中还综合了GoogleMaps API这样的地图系统。
HTML5提供了地理位置定位功能（Geolocation API），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文结合实例给大家分享如何使用HTML5，借助百度、谷歌地图接口来获取用户准确的地理位置信息。
定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的现代浏览器上运行，特别是手持设备如iphone，地理定位更加精确。首先我们要检测用户设备浏览器是否支持地理定位，如果支持则获取地理信息。注意这个特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，所以我们在访问该应用时会提示是否允许地理定位，我们当然选择允许即可。
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
alert("浏览器不支持地理定位。");
上面的代码可以知道，如果用户设备支持地理定位，则运行 getCurrentPosition() 方法。如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象，getCurrentPosition() 方法的第二个参数showError用于处理错误，它规定当获取用户位置失败时运行的函数。
我们先来看函数showError()，它规定获取用户地理位置失败时的一些错误代码处理方式：
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
alert("定位失败,用户拒绝请求地理定位");
case error.POSITION_UNAVAILABLE:
alert("定位失败,位置信息是不可用");
case error.TIMEOUT:
alert("定位失败,请求获取用户位置超时");
case error.UNKNOWN_ERROR:
alert("定位失败,定位系统失效");
我们再来看函数showPosition(),调用coords的latitude和longitude即可获取到用户的纬度和经度。
function showPosition(position){
var lat = position.coords. //纬度
var lag = position.coords. //经度
alert('纬度:'+lat+',经度:'+lag);
利用百度地图和谷歌地图接口获取用户地址
上面我们了解了HTML5的Geolocation可以获取用户的经纬度，那么我们要做的是需要把抽象的经纬度转成可读的有意义的真正的用户地理位置信息。幸运的是百度地图和谷歌地图等提供了这方面的接口，我们只需要将HTML5获取到的经纬度信息传给地图接口，则会返回用户所在的地理位置，包括省市区信息，甚至有街道、门牌号等详细的地理位置信息。
我们首先在页面定义要展示地理位置的div，分别定义id#baidu_geo和id#google_geo。我们只需修改关键函数showPosition()。先来看百度地图接口交互，我们将经纬度信息通过Ajax方式发送给百度地图接口，接口会返回相应的省市区街道信息。百度地图接口返回的是一串JSON数据，我们可以根据需求将需要的信息展示给div#baidu_geo。注意这里用到了jQuery库，需要先加载jQuery库文件。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.
var url = "http://api./geocoder/v2/?ak=C93bebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0";
type: "GET",
dataType: "jsonp",
beforeSend: function(){
$("#baidu_geo").html('正在定位...');
success: function (json) {
if(json.status==0){
$("#baidu_geo").html(json.result.formatted_address);
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#baidu_geo").html(latlon+"地址位置获取失败");
再来看谷歌地图接口交互。同样我们将经纬度信息通过Ajax方式发送给谷歌地图接口，接口会返回相应的省市区街道详细信息。谷歌地图接口返回的也是一串JSON数据，这些JSON数据比百度地图接口返回的要更详细，我们可以根据需求将需要的信息展示给div#google_geo。
function showPosition(position){
var latlon = position.coords.latitude+','+position.coords.
var url = '/maps/api/geocode/json?latlng='+latlon+'&language=CN';
type: "GET",
beforeSend: function(){
$("#google_geo").html('正在定位...');
success: function (json) {
if(json.status=='OK'){
var results = json.
$.each(results,function(index,array){
if(index==0){
$("#google_geo").html(array['formatted_address']);
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#google_geo").html(latlon+"地址位置获取失败");
以上的代码分别将百度地图接口和谷歌地图接口整合到函数showPosition()中，我们可以根据实际情况进行调用。当然这只是一个简单的应用，我们可以根据这个简单的示例开发出很多复杂的应用，建议用手机浏览器访问DEMO演示。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具君，已阅读到文档的结尾了呢~~
通过代码示例跟我学Html5相关技术——在HTML5中如何获取地理位置信息及应用实例（第1部分）
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
通过代码示例跟我学Html5相关技术——在HTML5中如何获取地理位置信息及应用实例（第1部分）
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口你的位置： >
> HTML5 获取当前位置的经纬度
HTML5 获取当前位置的经纬度
今天上午市场部门让我写一个地图导航的功能，我特么的不想写。一再的推辞。我说你们项目要求紧握需要时间看看，肯定不成的。因为我感觉这个功能首先需要H5 定位，其次就是百度的API。这是我最头疼的东西了。虽然我之前写过百度地图但那效果超级low啊。
特么的下午两点人家说了我给你两天时间看看成不成，当时我就郁闷了。。。。。。我说恩。。。啊
好吧。那就看看呗。（PS： 主要自己心里没谱，没写过啊，但是人家给时间了尼还要怎么推脱呢？低头看吧！）但是我看了一下文档，写了一个小demo后瞬间感觉信心倍增啊。原来H5定位没有想象中的那么难啊！
今天给大家看看我自己写的demo怎么实现H5地理定位吧。（就是一个简单的案例长的不漂亮）
&p id="demo"&点击这个按钮，获得您的坐标：&/p&
&button onclick="getLocation()"&试一下&/button&
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
x.innerHTML="Geolocation is not supported by this browser.";
function showPosition(position){
x.innerHTML="Latitude: " + position.coords.latitude + "&br /&Longitude: " + position.coords.
例子解释：
检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本，不含错误处理。
有什么不明白的请看
下班了写到这里，晚上继续和大家说说如何利用H5定位功能结合百度API 完成一个导航的需求！有需要的童鞋请继续关注。
很多小伙伴找我要demo，今天正好有时间我就稍微的整理了一下。（ps：我一直是很懒的。）需要的自己下载吧！ 移动端的需要部署到自己的服务器上看的哦！
下载地址：文件名称：HTML5 获取当前位置的经纬度文件大小：不大嘎嘎适用版本：手机更新日期：作者信息：小月博客 转载请注明： & 赏一点心意×
您也可以使用第三方帐号快捷登录
订单信息（价格单位：积分）
*商品名称：
*商品单价：
*商品数量：
收货信息商店（虚拟商品除邮箱外可不填）
收货姓名：
收货地址：
收货邮编：
用户邮箱：
电话号码：
手机号码：
留言备注：
总金额：1.00 积分极客学院团队出品 · 更新于
HTML5 地理定位
HTML5 Geolocation API 允许我们对喜欢的网站共享我们的位置。JavaScript 可以捕获到纬度和经度，还可以发送给后端服务器，然后做一些位置感知的事情，比如查找本地企业或者在地图上显示我们的位置。
当前大多数浏览器和移动设备都支持 Geolocation API。地理定位 APIs 是作为全局 navigator 对象的一个新属性工作的。可以按照如下方式创建地理定位对象：
var geolocation = navigator.
地理对象是一个允许组件检索设备地理位置相关信息的服务对象。
Geolocation 方法
地理定位对象提供了下列方法：
这个方法用于检索用户的当前地理位置。
这个方法用于检索设备当前地理位置定期更新信息。
这个方法用于取消 watchPosition 方法调用。
下面是一个使用上述方法的示例代码：
function getLocation() {
var geolocation = navigator.
geolocation.getCurrentPosition(showLocation, errorHandler);
这里的 showLocation 和 errorHandler 分别是用来下一节会讲述的获取实际位置和处理错误的回调方法。
Location 属性
地理定位方法 getCurrentPosition() 和 getPositionUsingMethodName() 指定了检索位置信息的回调方法。这些方法使用一个存储完整位置信息的 Position 对象异步调用。
这个 Position 对象指定了设备的当前地理位置。这个位置以一组带有方向和速度信息的地理坐标表示。
下面的表格描述了 Position 对象的属性。对于可选属性，如果系统没有提供值，则该属性值为 null。
表示设备的地理位置。位置以一组带有方向和速度信息的地理坐标表示。
coords.latitude
十进制的纬度估值。值范围为 [-90.00, +90.00]。
coords.longitude
十进制的经度固执。值范围为 [-180.00, +180.00]。
coords.altitude
WGS-84 球面以上的海拔高度固执，以米为单位计算。
coords.accuracy
以米为单位的纬度和经度精确估值。
coords.altitudeAccuracy
以米为单位的海拔高度精确估值。
coords.heading
相对正北方向设备以顺时针方向运动计算的当前方向。
coords.speed
以米/每秒为单位的设备当前地面速度。
检索位置信息和创建 Position 对象的日期时间。
下面是一个使用 Position 对象的示例代码。其中 showLocation 方法是一个回调方法：
function showLocation( position ) {
var latitude = position.coords.
var longitude = position.coords.
地理定位是复杂的。非常需要我们捕获任意错误并优雅的处理它。
地理定位方法 getCurrentPosition() 和 watchPosition() 可以使用一个提供 PositionError 对象的错误处理回调方法。这个对象有下列两属性。
错误描述信息。
下面这个表格描述了 PositionError 对象可能返回的错误码。
UNKNOWN_ERROR
由于未知错误，检索设备位置信息失败。
PERMISSION_DENIED
由于应用程序没有权限使用位置服务，检索设备位置信息失败。
POSITION_UNAVAILABLE
设备位置信息无法确定。
不能在给定的最大超时区间内检索位置信息。
下面是一个使用 PositionError 对象的示例代码。其中 errorHandler 方法是一个回调方法:
function errorHandler( err ) {
if (err.code == 1) {
// access is denied
Position 选项
下面是 getCurrentPosition() 方法的实际语法：
getCurrentPosition(callback, ErrorCallback, options)
其中第三个参数是指定一组检索设备地理位置选项的 PositionOptions 对象。
下列选项可以指定为第三个参数：
enableHighAccuracy
是否想要检索最精准的位置估值。默认值为 false。
timeout 属性就是 Web 应用程序要等待定位的毫秒数。
maximumAge
用于缓存位置信息的过期时间毫秒数。
下面这个示例代码展示了如何使用上面提到的方法：
function getLocation() {
var geolocation = navigator.
geolocation.getCurrentPosition(showLocation, errorHandler, {maximumAge: 75000});1258人阅读
Cocos2d-js 学习笔记（3）
一句话，使用 navigator.geolocation.getCurrentPosition（） 在苹果的浏览器上返回的坐标为 WGS-84 （即为原始坐标）， 在 android 手机的 Firefox 上返回的是 GCJ-02 （即为谷歌坐标）。
另外我在 android 上测试 UC 浏览器，发现 UC 返回的坐标既不是 WGS-84 也不是 GCJ-02，让人费解。
Chrome 浏览器还不支持这个接口。
我还测试了百度的定位接口 （new BMap.Geolocation（））.getCurrentPosition（），发现百度的接口在苹果上是准确的而在 android 手机上却偏差很多，我确认的原因是百度接口默认 GPS 设备返回的经纬度一定是 WGS-84，而 android 上有可能返回的 GCJ-02 或是其它类型的坐标百度没有做处理，所以百度的 h5 定位接口在 android 上有偏差。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：4667次
排名：千里之外
(1)(1)(2)(1)(1)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'