1. HTML5 开发
Web,MobileWeb & Apps
范圣刚
安博中程在线

2. Geolocation
定位和跟踪

3. 介绍
安博中程在线
Geolocation工作原理
Geolocation API
Example
扩展阅读
·
·
getCurrentPosition方法
Geolocation数据
Handling Errors
PositionOptions对象
watchPosition()方法和clearWatch()方法
-
-
-
-
-
·
·
3/14

4. Geolocation工作原理
识别地理位置的主要方法:
安博中程在线
通过IP地址
利用基站获取手机网络的接入位置
通过利用卫星定位获得经纬度信息的GPS设备
·
·
·
4/14

5. Geolocation API
可以获得用户所在地理位置的经纬度信息
调用Geolocation API从全局navigator对象的geolocation属性开始：
navigator.geolocation
安博中程在线
<scripttype='text/javascript'>
//最简单的使用方式：没有做任何的检测，错误处理，也没有选项参数
functionfind_my_location(){
navigator.geolocation.getCurrentPosition(show_map);
}
</script>
JAVASCRIPT
5/14

6. Geolocation API
检测浏览器是否支持地理位置API
方法1： 检测检测 全局对象navigator是否具有geolocation属性
方法2: 使用Modernizr提供的方法 检测检测
安博中程在线
<script type='text/javascript'>
function supports_geolocation() {
return !!navigator.geolocation;
}
</script>
JAVASCRIPT
<script type='text/javascript'>
function find_my_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// 浏览器没有提供原生支持，使用回退方案
}
}
</script>
JAVASCRIPT
6/14

7. Geolocation API
getCurrentPosition()
使用getCurrentPosition()方法 获取当前位置信息获取当前位置信息 .
安博中程在线
<script type='text/javascript'>
function find_my_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map);
} else {
// 其他方案
}
}
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
alert('Lat: ' + latitude + ' Lon: ' + longitude);
}
</script>
JAVASCRIPT
7/14

8. Position数据
成功的回调函数的参数是一个Position对象，包括coords和timestamp两个属性。
属性 类型 备注
coords.latitude double 纬度(度)
coords.longitude double 经度(度)
coords.accuracy double 精度(米)
coords.altitude double或null 海拔(米)
coords.altitudeAccuracy double或null 海拔精度(米)
coords.heading double或null 度(顺时针，以正北为基准)
coords.speed double或null 米/秒
timestamp DOMTimeStamp 可以转成Date对象
安博中程在线 8/14

9. Handling Errors
getCurrentPosition()的第二个参数(可选)——容错处理的回调函数：
在获取地理位置过程中有任何错误，都会调用该回调函数，并且会传入一个PositionError对象作为参数。
安博中程在线
<script type='text/javascript'>
function find_my_location() {
if (Modernizr.geolocation) {
navigator.geolocation.getCurrentPosition(show_map, handle_error);
} else {
// 其他方案
}
}
function handle_error(err) {
if (err.code == 1) {
// 用户说不！
}
}
</script>
JAVASCRIPT
9/14

10. PositionError对象
属性 类型 备注
code short 可枚举
message DOMString 与终端用户无关
其中code属性具有以下属性值：
安博中程在线
PERMISSION_DENIED(1): 用户不同意被获取位置信息。
POSITION_UNAVAILABLE(2): 网络不可用或者无法连接到获取位置信息的卫星。
TIMEOUT(3): 网络可用但是花了太长时间的计算用户的位置上。
UNKNOWN_ERROR(0): 发生其他未知错误。
·
·
·
·
10/14

11. PositionOptions对象
两种定位方式和缓存的位置信息
属性 类型 默认值 备注
enableHighAccuracy boolean false 设成true可能会使得获取位置的速度变慢
timeout long 没有默认值 单位：毫秒
maximumAge long 0 单位：毫秒
安博中程在线 11/14

12. Example
获得经纬度信息并在地图上显示
显示位置显示位置
安博中程在线
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}
JAVASCRIPT
12/14

13. 扩展阅读
安博中程在线
W3C地理位置 API
geo.js, 地理位置的JS Framework。依照W3C地理位置 API规范封装了底层系统特定的实现。
·
·
13/14

14. <Thank you!>
微博 @范圣刚
博客 www.tfan.org
github github.com/princetoad