测试demo的github地址: github.com/lily1010/html5_geolocation
HTML5 Geolocation API 用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
一 基于浏览器的HTML5查找地理位置
html5中的GPS定位功能封装在 navigator.geolocation 属性里,有三种方法:
(1) getCurrentPosition 只获取一次用户的位置
立即学习“前端免费学习笔记(深入)”;
(2) watchPosition 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。
(3) clearWatch() - 停止 watchPosition() 方法
二 getCurrentPosition和 watchPosition方法使用格式是
getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)
(1)successCallback表示调用函数成功以后的回调函数,该函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。

(2)errorCallback表示返回的错误代码。它包含以下两个属性:
1、message:错误信息 2、 code:错误代码。 其中code错误代码包括以下四个值: 1 位置服务被拒绝 2 暂时获取不到位置信息 3 获取信息超时 4 未知错误
(3)positionOptions数据格式为JSON,有三个可选的属性:
1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。 2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。 3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。
下面来看一下测试例子:(注意要开启定位后才可以看效果)
本书是全面讲述PHP与MySQL的经典之作,书中不但全面介绍了两种技术的核心特性,还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性,书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验,可用于解决开发者在实际中所面临的各种挑战。
基于浏览器的HTML5查找地理位置
上面代码最好用手机测试,因为谷歌浏览器因为被国内封的缘故,定位嘛,你们懂得
二 HTML5 geolocation调用百度地图api
百度地图的手册地址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1
事先说明,html5不是精确定位,所以在地图上查看效果时总有几百米的误差
基于浏览器的HTML5查找地理位置和调取百度地图api
上面代码已经在手机上测试通过了,误差有点大,还是不适合精确定位,定位到城市还是不错的
【相关推荐】
1. 免费h5在线视频教程
2. HTML5-Geolocation APIs的示例代码
3. html5 navigator.geolocation基于浏览器获取地理位置代码案例
4. html5指南(4)-使用Geolocation的详解
5. 详解Html5 Geolocation获取地理位置信息的示例代码分享










