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='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修改地址栏而不刷新页面（二）