HTML5 Geolocation API地理定位整理（二）

Geolocation 实例demo

1.使用watchPosition()监听客户端位置

var watchOne=null;
if (navigator.geolocation) {
//watchPosition()---用于监听客户端位置
//此方法没有固定的时间间隔，尤其在PC端很多时候会获取位置出错
//在监听的过程中有时也会出错，在PC端很多时候从https://www.googleapis.com/获取位置信息
//在火狐中关于位置的描述：https://www.mozilla.org/zh-CN/firefox/geolocation/，也是使用Google的位置服务
//在IE中的没整理
watchOne= navigator.geolocation.watchPosition(successCB,errorCB);
} else {
console.log('你的浏览器不支持地理定位');
}
//清空监听
function clear(){
navigator.geolocation.clearWatch(watchOne);
}
//获取地理位置成功
function successCB(position) {
console.info(position);
console.log('位置精度:'+position.coords.accuracy);
console.log('维度：'+position.coords.latitude);
console.log('经度：'+position.coords.longitude);
}
//获取地理位置失败
function errorCB(error) {
console.error(error);
}

微信WebView监听如下：



2.getCurrentPosition() 获取客户端位置，并显示到百度地图

<div id="container" style='width:500px;height:300px;'></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BPr36B36O2I3dEumnp3TQ8AX"></script>

js代码

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCB, errorCB);
} else {
console.log('你的浏览器不支持地理定位');
}
//获取地理位置成功
function successCB(position) {
console.info(position.coords);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
//显示到百度地图
var map = new BMap.Map("container"); // 创建地图实例
var point = new BMap.Point(longitude, latitude); // 创建点坐标
map.centerAndZoom(point, 10); // 初始化地图，设置中心点坐标和地图级别
addMarker(point,0);
//添加标注
function addMarker(point, index) { // 创建图标对象
// 创建标注对象并添加到地图
var marker = new BMap.Marker(point, {
//icon: myIcon
});
map.addOverlay(marker);
}
}
//获取地理位置失败
function errorCB(error) {
console.error(error);
}

更多：

HTML5 Geolocation API地理定位整理（一）

HTML5 离线缓存详解（转）

HTML5 History对象，Javascript修改地址栏而不刷新页面（二）