標籤：通訊 sed api rand 精度 htm 頁面 pos win
Geolocation：地理定位，擷取當前瀏覽器所在的地理座標資訊（包括經度、緯度、海拔高度、移動速度），實現LBS應用(Location Based Service)——基於定位的服務，如訂 餐、面對面XX、導航、訊息推送等。官網：http://lbsyun.baidu.com/
技術上如何擷取瀏覽器所在的地理座標：
(1)手機瀏覽器：
可以通過內建的GPS晶片與衛星定位通訊——精確在m級；
還可以通過手機通訊基站來定位——精度在km級
(2)PC瀏覽器：
通過IP地址反向推匯出瀏覽器定位資訊——精度在km級
HTML5提供了一個新的對象，專用於讀取地理定位資訊：
window.navigator.geolocation {
getCurrentPosition()：得到當前定位資訊
watchPosition()：監視定位元據的改變
clearWatch()：清除定位監視
}
核心代碼：
1 navigator.geolocation.getCurrentPosition( 2 3 function(pos){ //定位成功 4 5 console.log(pos.timestamp) 6 7 console.log(pos.coords.longitude/latitude/altitude/speed ); 8 }, 9 10 function(err){ //定位失敗11 12 console.log(err.code + err.message);13 14 }15 16 );
在自己的網頁中嵌入百度地圖，實現步驟：
(1)在頁面中引入百度地圖應用JS檔案
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰">
</script>
(2)編寫代碼，調用百度地圖API，在自己的網頁中顯示地圖內容
var map = new BMap.Map("container");
var point = new BMap.Point(116.300982,39.916078);
map.centerAndZoom(point, 17);
完整程式碼範例：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>百度地圖 hDZD6X3OarYgLs4El0BsaY9GOI21sF3a</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:600px;width:800px; margin: 0 auto;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰">//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize"</script></head> <body> <div id="container"></div> <script type="text/javascript"> var map = new BMap.Map("container"); // 建立地圖執行個體 var point = new BMap.Point(120.062607,30.385093); // 建立點座標 map.centerAndZoom(point, 15); // 初始化地圖，設定中心點座標和地圖層級 map.enableScrollWheelZoom(); //啟用滾輪放大縮小，預設禁用 map.enableContinuousZoom(); //啟用地圖慣性拖拽，預設禁用 var marker = new BMap.Marker(point); // 建立標註 map.addOverlay(marker); // 將標註添加到地圖中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳動的動畫</script> </body> </html>
百度地圖相關外掛程式:https://github.com/HLJMT
HTML5 — 地理定位
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
