使用百度地圖API在頁面新增百度地圖應用
目錄：
- 頁面預覽
- 準備工作
- 程式碼實現
- 相關連結
本文我們使用百度提供的地圖API，通過8行程式碼就可在自己的網頁引入百度地圖的應用。操作十分便捷，功能又十分強大。
1、頁面預覽
很多時候我們希望在自己的頁面中嵌入一個地圖應用，方便向他人直觀地提供自己的位置資訊。本文我們利用百度提供的api，在自己的網頁中嵌入百度地圖的應用。完成後介面預覽如上圖所示，當然我們這裡只關注圖中百度地圖那一塊。
2、準備工作
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程式介面，可幫助我們在網站中構建功能豐富、互動性強的地圖應用，支援PC端和移動端基於瀏覽器的地圖應用開發，且支援HTML5特性的地圖開發。
該套API免費對外開放。自v1.5版本起，需先申請金鑰（ak）才可使用，介面（除傳送簡訊功能外）無使用次數限制。
申請祕鑰的過程十分簡單，如下列出大致過程，首先你要有一個百度賬號，切記。
第一步：
點選上文中申請祕鑰的連結，然後點選圖中的申請祕鑰執行下一步
第二步：
如果你還未成為百度開發者，你需要首先稱為一名百度開發者，按照步驟完善資訊即可。
第三步：
接下來點選建立應用。
第四步：
應用名稱填上自己的應用名稱就可以了，應用型別可以選擇瀏覽器端，下面的Referer白名單參見下面的說明。我們這裡作為學習使用，填寫一個英文半形的*就OK了。接下來點選提交。
第五步：
OK，獲得祕鑰，就是訪問應用(AK)下面的那一串序列號。可以先copy下來備用。
3、程式碼實現
插入百度地圖的方法十分簡單。
- (1)插入JavaScript API
- (2)插入地圖塊
- (3)插入JS程式碼建立地圖應用
(1)插入JavaScript API
在頁面<head></head>標籤對中引入如下百度地圖JS API:
<!-- baidu Map api --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=祕鑰"></script>
特別注意，以上程式碼中的ak=祕鑰處，祕鑰即為準備工作中申請的祕鑰，對應複製替換祕鑰二字即可。
另外為了提高網頁的載入速度，我們可以將上述程式碼放在<body></body>標籤對中的最後。這樣會提升頁面的載入速度，但是地圖應用的載入時間同樣會依賴於以上檔案的載入速度。
(2)插入地圖塊
我們只需要在插入地圖應用的位置，插入一個div塊即可，同時設定一個id供後續使用，方式如下：
<div id="baiduMap"><div>
這樣就可以了。
(3)插入JS程式碼建立地圖應用
在<body></body>的末尾插入以下JavaScript程式碼段：
<script type="text/javascript">
var map = new BMap.Map("baiduMap"); //建立Map例項
var point = new BMap.Point(114.419915,30.513719); //建立Point位置例項
map.centerAndZoom(point, 19); //設定地圖中心點及縮放級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
var marker = new BMap.Marker(point); //建立一個Marker點
map.addOverlay(marker); //將Marker點覆蓋到地圖上
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //使Marker點跳動起來
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>程式碼第2行建立一個Map例項；
程式碼第3行建立一個Point位置例項，為了確定自己位置的座標，可以訪問http://api.map.baidu.com/lbsapi/getpoint/index.html在上面確定自己位置的座標。
程式碼第4行設定地圖的中心點，以及縮放級別，縮放級別會在確定位置座標的網站上顯示，這裡採用的是19級。
程式碼第6~8行，為了更加清晰地指明自己的位置資訊，我們在地圖上新增一個Marker，同時讓它跳動起來。見預覽圖片，中間紅色的Marker指向我們要定位的點，同時會更加醒目地跳動。
程式碼第9行，開啟滑鼠滾輪對地圖縮放的控制。
至此大功告成。引入百度地圖JS API，然後通過短短8行程式碼就可在頁面中實現一個百度地圖的應用。完整程式碼如下(只包含地圖應用，省略了預覽圖片中的其他部分)：
<!DOCTYPE html>
<html lang="zh-CN">
<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,#baiduMap {width: 90%;height: 90%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<!-- baiduMap api -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的祕鑰"></script>
</head>
<body>
<div id="baiduMap" class="col-md-6"></div>
<!-- baiduMap -->
<script type="text/javascript">
var map = new BMap.Map("baiduMap"); //建立Map例項
var point = new BMap.Point(114.419915,30.513719); //建立point位置
map.centerAndZoom(point, 19); //設定地圖中心點及縮放級別
map.addControl(new BMap.MapTypeControl()); //新增地圖型別控制元件
var marker = new BMap.Marker(point); //建立一個Marker點
map.addOverlay(marker); //將Marker點覆蓋到地圖上
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //使Marker點跳動起來
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>
</body>
</html>將以上程式碼複製到html頁面中雙擊執行就行了。注意，要將以上程式碼中相應的位置填入你自己的祕鑰！
另外需要特別說明的一點是，如果沒有給地圖指定高度，可能不會在頁面中顯示，所以最好手動設定地圖的高度。
4、相關連結
我們這裡僅僅使用了百度地圖api的一小部分，實際上其功能十分強大。比如GPS定位功能，全景地圖功能，個性化地圖設定等功能。