html5:地理信息 LBS基於地理的服務和百度地圖API的使用

時間 2019-11-10

標籤 html5 html 地理信息 lbs 基於服務百度地圖 api 使用欄目 HTML5 简体版

原文原文鏈接

地理位置請求

單次定位請求getCurrentPosition(請求成功函數，請求失敗函數，數據收集方式)
屢次定位請求watchPosition(請求成功函數，請求失敗函數，數據收集方式)
關閉更新請求clearWatch ，相似js中的定時器php

navigator.geolocation
單次定位請求  ：getCurrentPosition(請求成功，請求失敗，數據收集方式)
    請求成功函數function(position)
        經度 :  position.coords.longitude
        緯度 :  position.coords.latitude
        準確度 :  position.coords.accuracy
        海拔 :  position.coords.altitude
        海拔準確度 :  position.coords.altitudeAcuracy
        行進方向 :  position.coords.heading
        地面速度 :  position.coords.speed
        時間戳 : new Date(position.timestamp)

     請求失敗函數function(err)
        失敗編號  ：code
        0  :  不包括其餘錯誤編號中的錯誤
        1  :  用戶拒絕瀏覽器獲取位置信息
        2  :  嘗試獲取用戶信息，但失敗了
        3  :   設置了timeout值，獲取位置超時了
    數據收集 :  json的形式
        enableHighAcuracy  :  更精確的查找，默認false
        timeout  :  獲取位置容許最長時間，默認infinity
        maximumAge :  位置能夠緩存的最大時間，默認0
屢次定位請求  :  watchPosition(像setInterval)
        移動設備有用，位置改變纔會觸發
        配置參數：frequency 更新的頻率

關閉更新請求  :  clearWatch(像clearInterval)

demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>

//LBS : 基於地圖信息的應用

window.onload = function(){
    var oInput = document.getElementById('input1');
    var oT = document.getElementById('t1'); 
    var timer = null;   
    oInput.onclick = function(){    
                //通常移動端，手機位置換動。//換成單次試一試getCurrentPosition      
        timer = navigator.geolocation.watchPosition(function(position){         
            oT.value += '經度:' + position.coords.longitude+'\n';
            oT.value += '緯度 :' + position.coords.latitude+'\n';
            oT.value += '準確度 :' + position.coords.accuracy+'\n';
            oT.value += '海拔 :' + position.coords.altitude+'\n';
            oT.value += '海拔準確度 :' + position.coords.altitudeAcuracy+'\n';
            oT.value += '行進方向 :' + position.coords.heading+'\n';
            oT.value += '地面速度 :' + position.coords.speed+'\n';
            oT.value += '時間戳:' + new Date(position.timestamp)+'\n';                     
        },function(err){            
            //err.code // 失敗所對應的編號          
            alert( err.code );          
            navigator.geolocation.clearWatch(timer);            
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000,
            frequency : 1000
        });     
    };  
};

</script>
</head>
<body>
<input type="button" value="請求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
</html>

結果

百度地圖API的使用

地址

http://lbsyun.baidu.com/,http://lbsyun.baidu.com/index.php?title=jspopular找實例html

百度地圖apidemo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
#div1{ width:400px; height:400px; border:1px #000 solid;}
</style>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
    var oInput = document.getElementById('input1'); 
    oInput.onclick = function(){        
        navigator.geolocation.getCurrentPosition(function(position){            
            var y = position.coords.longitude;
            var x = position.coords.latitude;
            
            var map = new BMap.Map("div1");         
            var pt = new BMap.Point(y, x);          
            map.centerAndZoom(pt, 14);
            map.enableScrollWheelZoom();
            var myIcon = new BMap.Icon("by.png", new BMap.Size(30,30));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 建立標註
            map.addOverlay(marker2); 
            
            var opts = {
              width : 200,     // 信息窗口寬度
              height: 60,     // 信息窗口高度
              title : "by標題"  // 信息窗口標題
            }
            var infoWindow = new BMap.InfoWindow("軟硬件公司", opts);  // 建立信息窗口對象
            map.openInfoWindow(infoWindow,pt); //開啓信息窗口                     
        });     
    };  
};
</script>
</head>
<body>
<input type="button" value="請求" id="input1" />
<div id="div1"></div>
</body>
</html>