在頁面中引入百度地圖API的步驟以及Geolocation簡單的使用
在頁面中想要展示的頁面中使用百度地圖的API十分的簡單而且是十分有用的。下面先介紹一些HTML5中地理位置的一些知識。
地理位置(Geolocation)是HTML5中重要的特性之一。提供了確定使用者位置的功能，藉助這個特效能夠開發基於位置資訊的應用，使得開發人員不用藉助其他軟體就能輕鬆實現位置查詢，地圖應用，導航等功能。
Geolocation的基本原理
1. GPS
GPS基本原理是測量出已知位置的衛星到使用者接收機之間的距離，然後綜合多顆衛星的資料就可知道接收機的具體位置。適用於具備GPS功能的裝置
優點：在空曠地區比較準確，覆蓋面比較廣
缺點：需要比較長時間定位，比較耗電池，在室內不太好，需要
GPS裝置支援
2. WIFI
地理定位服務提供者會在全世界範圍內去收集WIFI熱點的位置資訊，然後使用者的裝置只要能支援WIFI就能獲取到周圍WIFI熱點的位置和訊號強弱資訊，然 後把這些資訊發給提供者，就能得到自己的位置.
優點：比較準確，適用於室內環境，相應速度快
缺點：在wifi熱點少的地方不適用
3. IP定位
原理很簡單，就是通過你裝置的實體地址所備案的地址資訊來定位，但這種方式精確度不高，特別是用代理來
上網的情況下。一般作為GPS和WIFI都不支援的情況下大致模糊匹配，比如各大團購網站檢測使用者所在城市
4. 手機基站
和WIFI原理類似，Apple的裝置就是把WIFI和基站資訊結合起來進行定位。
實現
1. 核心物件
①Geolocation是window.navigator下面的一個物件，該物件提供了實現地理位置定位的介面。
②要用該功能首先判斷瀏覽器是否支援navigator.geolocation該物件。
2. Geolocation物件詳解
getCurrentPosition(success,error,options)該方法是實現地理定位的核心方法，該方法能夠對獲取到的資訊作出處理以及設定。
A.success(position) 獲取資訊成功的回撥函式
B.error(errorcode)獲取資訊失敗的回撥函式
C.options獲取資訊前可以按照你的需求來設定一些引數
success(positon) 獲取資訊成功的回撥函式
當成功獲得資訊的時候，會自動呼叫success函式，而這個函式會自動生成一個包含返回地理資訊的position物件，如下：
A.coords.latitude（緯度）
B.coords.longitude（經度）
C.coords.altitude（海拔）
D.coords.accuracy（位置精確度）
E.coords.altitudeAccuracy(海拔精確度)
F.coords.heading（朝向）
G.coords.speed (速度)
H.timestamp(響應的日期/時間)
error(errorCode)獲取物件失敗的回撥函式
A. 地理資訊會因為各種因素，例如訊號不好等等而出錯。因此當獲取資訊失敗的時候會自
動呼叫getCurrentPosition的第二個引數，即error函式，這個函式會自動生成一個包含錯
誤程式碼和錯誤資訊的物件作為其引數，code是錯誤程式碼，message是錯誤資訊。
switch(errorcode.code){
case 1 :
alert(errorcode.message);//使用者選了不允許
break;
case 2:
alert(errorcode.message);//連不上GPS衛星，或者網路斷了
break;
case 3:
alert(errorcode.message);//超時了
break;
default:
alert(errorcode.message);//未知錯誤，其實是err.code==0的時候
break;
}option 設定一些引數
options是一個物件，可以設定超時時間、快取時間等，
如下：
A.enableHighAccuracy 表示是否允許使用高精度，但這個
引數在很多裝置上設定了都沒用，裝置綜合考慮電量、
地理情況等，很多時候都是預設的由裝置自身來調整。
B.timeout 指定超時時間
C.maximumAge 是指快取的時間
其餘方法
watchPosition(success,error,options)表示重複獲取地理位置，相當於將getCurrentPosition這個方法利用setinterval不斷執行，其他用法和引數使用一樣。
2.clearWatch()用來清除前一次獲取的位置資訊。
這個兩個方法配合使用，能夠實現一些很棒的功能，比
如說：導航等！
引入百度地圖
下面就以引入百度地圖的API為例子闡述一下百度地圖API的使用方法和簡單的程式碼引用
1. 先進入百度地圖API的首頁(百度搜索百度地圖API即可)就能看到下面的頁面：
2. 然後先點選上圖中的申請金鑰，按照流程流程申請一個金鑰，填寫完成之後用郵件啟用一下就可以得到下面的情況：
3. 然後點選頁面最下方的想用什麼開發：
4. 我們以其中的隨便一個為例子：
5. 把“你的金鑰改“為剛才你申請的那個金鑰就可以了：
簡單小DEMO
然後根據前面的解釋我們能自己動手做一個小例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的金鑰"></script>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
function success(pos) {
var la = pos.coords.latitude;
var lo = pos.coords.longitude;
alert(la);
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座標和地圖級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search("食堂");
}
function error(errorCode) {
alert(errorCode.code+"--"+errorCode.message); //列印錯誤程式碼和錯誤資訊
}
var option = {}; //不設定任何引數
if(navigator .geolocation) {//如果瀏覽器支援的話
navigator.geolocation.getCurrentPosition(success,error,option); //獲得當前的額位置
} else {
alert("no spport");
}
</script>