zyz
H5&C3之地理信息
04/12
一、地址位置
- 经度: 南北的连接线
- 维度: 东西的连接线
二、位置信息从哪里获取?
- IP地址
- GPS全球定位系统
- WIFI无线网络
- 手机基站
三、地理位置对象navigator.geolocation
getCurrentPosition(): 单次定位请求
// 参数1: 请求成功函数 // 参数2: 请求失败函数 // 参数3: 数据收集(JSON数据格式) navigator.geolocation.getCurrentPosition(function(){}, function(){}, {}); // 参数3选项设置 options = { enableHighAccuracy, // boolean 是否要求高精度的地理信息 timeout, // 表示等待响应的最大时间,默认是0毫秒,表示无穷时间 maximumAge // 应用程序的缓存时间 }
请求成功函数
经度: position.coords.longitude 维度: position.coords.latitude 准确度: position.coords.accuracy 海拔: position.coords.altitude 海拔准确度: position.coords.altitudeAccuracy 行进方向: position.coords.heading 地面速度: position.coords.speed 时间戳: new Date(position.timestamp) navigator.geolocation.getCurrentPosition(function(position){ oText.innerHTML += '经度: ' + position.coords.longitude + '\n'; oText.innerHTML += '维度: ' + position.coords.latitude + '\n'; });
请求失败函数
0: 不包含其他错误编号中的错误 1: 用户拒绝浏览器获取位置信息 2: 尝试获取用户信息,但失败了 3: 设置了timeout,即获取位置请求超时了 navigator.geolocation.getCurrentPosition(function(position){ oText.innerHTML += '经度: ' + position.coords.longitude + '\n'; oText.innerHTML += '维度: ' + position.coords.latitude + '\n'; }, function(err){ // 失败对应的编号: err.code alert(err.code); });
数据收集(JSON数据格式)
enableHighAcuracy: 更精确的查找,默认是false(越精确越耗电); timeout: 获取位置允许最长时间,默认infinity(没有超时即获取失败后继续请求获取); maximumAge: 位置可以缓存最大时间,默认0(有时候避免频繁点击,而频繁获取); oBt1.onclick = function(){ navigator.geolocation.getCurrentPosition(function(position){ // 请求成功 oText.innerHTML += '经度: ' + position.coords.longitude + '\n'; oText.innerHTML += '维度: ' + position.coords.latitude + '\n'; }, function(err){ // 请求失败 alert(err.code); }, { // 数据收集 enableHighAcuracy: true, timeout: 8000, maximumAge: 5000 }); }
watchPosition(): 多次定位请求(类似setInterval)
移动设备有用,当位置发生改变时才触发; 配置参数: frequency更新的频率; oBt1.onclick = function(){ location = navigator.geolocation.watchPosition(function(position){ oText.innerHTML += '经度: ' + position.coords.longitude + '\n'; oText.innerHTML += '维度: ' + position.coords.latitude + '\n'; }, function(err){ alert(err.code); // 关闭请求 navigator.geolocation.clearWatch(location); }, { enableHighAcuracy: true, timeout: 8000, maximumAge: 5000, frequency: 1000 }); }
- clearWatch(): 关闭更新请求(类似clearInterval)
四、集成百度地图
百度地图API: http://lbsyun.baidu.com/index.php?title=jspopular
【参考"示例DEMO",快速帮助我们集成百度地图】 1、注册成为百度账号; 2、申请KEY; 3、运行Demo; > 添加key; 4、找到对应功能具体的模块;