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

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);
}