重溫---HTML5高階---地理定位
地理定位：使用JS獲取瀏覽器當前所在的地理座標，實現LBS（Location Based Service，基於定位的服務），具體資料包括：
經度：longitude
緯度：latitude
海拔：altitude
速度：speed
技術上如何獲取瀏覽器所在的定位資訊：
(1)手機中的瀏覽器
靠手機內建的GPS晶片資料，精度在“米”級
靠手機與之通訊基站資料，精度在“公里”級
(2)PC中的瀏覽器
靠IP地址反向解析，精度在“公里”級
HTML5新增了用於獲取瀏覽器所在定位的物件：
window.navigator.geolocation {
getCurrentPosition: fn 用於獲取當前定位資訊
watchPosition: fn 不停的監視定位資訊的改變
clearWatch: fn 清除監視
}
------------------------------------
navigator.geolocation.getCurrentPosition(
funcntion(pos){
console.log('定位成功');
}, function(err){
console.log('定位失敗');
}
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">獲取當前瀏覽器所在的定位資訊</button>
<script>
btn.onclick=function () {
window.navigator.geolocation.getCurrentPosition(succCB,errCB);
}
function succCB(pos) {
console.log('成功獲取定位資訊');
console.log('定位時間:'+pos.timestamp);
console.log('經度:'+pos.coords.longitude);
console.log('緯度:'+pos.coords.latitude);
console.log('海拔:'+pos.coords.altitude);
console.log('速度:'+pos.coords.speed);
}
function errCB(err) {
console.log('獲取定位資訊失敗');
console.log('錯誤編號:'+err.code);
console.log('錯誤訊息:'+err.message);
}
</script>
</body>
</html>如何在頁面中使用百度地圖 —— 擴充套件小知識
從map.baidu.com下點選“地圖開放平臺”：
目前官網： http://lbsyun.baidu.com/
JS-API使用手冊： http://lbsyun.baidu.com/index.php?title=jspopular
第三方工具的學習步驟：
(1)開啟官網，找定義，功能說明
可以基於百度地圖進行Android、iOS、Web應用開發
http://lbsyun.baidu.com/index.php?title=jspopular
(2)找示例程式
(3)找API文件，編寫自己的應用
使用百度地圖API步驟：
(1)註冊百度開發者賬號
(2)使用開發者賬號申請建立一個Web應用賬號，獲取一個訪問百度地圖的金鑰（AccessKey）
http://lbsyun.baidu.com/apiconsole/key
(3)編寫HTML網頁，出示當前網站的訪問金鑰，呼叫百度地圖API
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的網站在百度地圖申請的訪問祕鑰 ">
</script>
//建立地圖例項
var map = new BMap.Map("container");
//建立一個指定的點 —— 文博大廈
var p = new BMap.Point(116.300982,39.915907);
//以指定點為中心顯示地圖
map.centerAndZoom(p, 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>Hello, World</title>
<style>
body{
height:100%;
margin:0px;
padding:0px
}
#container{
width:800px;
height:500px;
}
</style>
<script src="http://api.map.baidu.com/api?v=3.0&ak=UasTkGnlX3NAKiS675ux8OCIrTP6AFDc">
//v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的金鑰"
</script>
</head>
<body>
<h3>在自己的網頁中使用百度地圖</h3>
<div id="container"></div>
<script>
// 建立地圖例項
var map = new BMap.Map("container");
// 建立點座標
var point = new BMap.Point(116.060038,39.507595);
// 初始化地圖，設定中心點座標和地圖級別
map.centerAndZoom(point, 15);
//新增地圖控制元件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom(true);
//新增地圖上的覆蓋物件 overlay
//新增標記
// var marker=new BMap.Marker(point);
// //跳動的動畫
// marker.setAnimation(BMAP_ANIMATION_BOUNCE);
// map.addOverlay(marker);
var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
var marker2 = new BMap.Marker(point,{icon:myIcon}); // 建立標註
marker2.setAnimation(BMAP_ANIMATION_BOUNCE);
map.addOverlay(marker2); // 將標註新增到地圖中
//新增一個說明視窗
var param={
width:100,
height:30,
title:'涿州物探局科技園區'
};
var win=new BMap.InfoWindow('地址:華陽東路',param);
map.openInfoWindow(win,point);
</script>
</body>
</html>