地理定位：使用JS獲取瀏覽器當(dāng)前所在的地理坐標(biāo)，實(shí)現(xiàn)LBS（Location Based Service，基于定位的服務(wù)），具體數(shù)據(jù)包括：
? ????經(jīng)度：longitude
? ????緯度：latitude
? ????海拔：altitude
? ????速度：speed
?技術(shù)上如何獲取瀏覽器所在的定位信息：
?(1)手機(jī)中的瀏覽器
???????靠手機(jī)內(nèi)置的GPS芯片數(shù)據(jù)，精度在“米”級(jí)
???????靠手機(jī)與之通訊基站數(shù)據(jù)，精度在“公里”級(jí)
?(2)PC中的瀏覽器
???????靠IP地址反向解析，精度在“公里”級(jí)
?HTML5新增了用于獲取瀏覽器所在定位的對(duì)象：
? window.navigator.geolocation {
???????getCurrentPosition: fn? 用于獲取當(dāng)前定位信息
???????watchPosition: fn? 不停的監(jiān)視定位信息的改變
???????clearWatch: fn 清除監(jiān)視
? }
? ------------------------------------
? 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">獲取當(dāng)前瀏覽器所在的定位信息</button> <script> btn.onclick=function () { window.navigator.geolocation.getCurrentPosition(succCB,errCB); } function succCB(pos) { console.log('成功獲取定位信息'); console.log('定位時(shí)間:' pos.timestamp); console.log('經(jīng)度:' 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('錯(cuò)誤編號(hào):' err.code); console.log('錯(cuò)誤消息:' err.message); } </script></body></html>如何在頁(yè)面中使用百度地圖 —— 擴(kuò)展小知識(shí)
? 從map.baidu.com下點(diǎn)擊“地圖開(kāi)放平臺(tái)”：
? 目前官網(wǎng)：? http://lbsyun.baidu.com/
? JS-API使用手冊(cè)：? http://lbsyun.baidu.com/index.php?title=jspopular
? 第三方工具的學(xué)習(xí)步驟：
? (1)打開(kāi)官網(wǎng)，找定義，功能說(shuō)明
???????可以基于百度地圖進(jìn)行Android、iOS、Web應(yīng)用開(kāi)發(fā)
http://lbsyun.baidu.com/index.php?title=jspopular
? (2)找示例程序
???????
? (3)找API文檔，編寫自己的應(yīng)用
使用百度地圖API步驟：
(1)注冊(cè)百度開(kāi)發(fā)者賬號(hào)
(2)使用開(kāi)發(fā)者賬號(hào)申請(qǐng)創(chuàng)建一個(gè)Web應(yīng)用賬號(hào)，獲取一個(gè)訪問(wèn)百度地圖的密鑰（AccessKey）
http://lbsyun.baidu.com/apiconsole/key
???????
(3)編寫HTML網(wǎng)頁(yè)，出示當(dāng)前網(wǎng)站的訪問(wèn)密鑰，調(diào)用百度地圖API
? <script src="http://api.map.baidu.com/api?v=2.0&ak=您的網(wǎng)站在百度地圖申請(qǐng)的訪問(wèn)秘鑰 ">
? </script>
? //創(chuàng)建地圖實(shí)例???
? var map = new BMap.Map("container");
? //創(chuàng)建一個(gè)指定的點(diǎn) —— 文博大廈
? var p = new BMap.Point(116.300982,39.915907);
? //以指定點(diǎn)為中心顯示地圖
? 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>在自己的網(wǎng)頁(yè)中使用百度地圖</h3> <div id="container"></div><script> // 創(chuàng)建地圖實(shí)例 var map = new BMap.Map("container"); // 創(chuàng)建點(diǎn)坐標(biāo) var point = new BMap.Point(116.060038,39.507595); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別 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 //添加標(biāo)記 // var marker=new BMap.Marker(point); // //跳動(dòng)的動(dòng)畫 // 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}); // 創(chuàng)建標(biāo)注 marker2.setAnimation(BMAP_ANIMATION_BOUNCE); map.addOverlay(marker2); // 將標(biāo)注添加到地圖中 //添加一個(gè)說(shuō)明窗口 var param={ width:100, height:30, title:'涿州物探局科技園區(qū)' }; var win=new BMap.InfoWindow('地址:華陽(yáng)東路',param); map.openInfoWindow(win,point);</script></body></html>?
來(lái)源：http://www.icode9.com/content-4-47401.html聯(lián)系客服
