目錄：
頁面預覽 準備工作 代碼實現(xiàn) 相關(guān)鏈接本文我們使用百度提供的地圖API,，通過8行代碼就可在自己的網(wǎng)頁引入百度地圖的應用,。操作十分便捷，功能又十分強大,。
1、頁面預覽
X很多時候我們希望在自己的頁面中嵌入一個地圖應用,，方便向他人直觀地提供自己的位置信息,。本文我們利用百度提供的api，在自己的網(wǎng)頁中嵌入百度地圖的應用,。完成后界面預覽如上圖所示,，當然我們這里只關(guān)注圖中百度地圖那一塊。
2,、準備工作 百度地圖
JavaScriptAPI是一套由JavaScript語言編寫的應用程序接口,，可幫助我們在網(wǎng)站中構(gòu)建功能豐富,、交互性強的地圖應用，支持PC端和移動端基于瀏覽器的地圖應用開發(fā),，且支持HTML5特性的地圖開發(fā),。
該套API免費對外開放。自v1.5版本起,，需先
申請密鑰（ak）才可使用,，接口（除發(fā)送短信功能外）無使用次數(shù)限制。
申請秘鑰的過程十分簡單,，如下列出大致過程,，首先你要有一個百度賬號，切記,。
第一步：
點擊上文中申請秘鑰的鏈接,，然后點擊圖中的申請秘鑰執(zhí)行下一步
第二步：
如果你還未成為百度開發(fā)者，你需要首先稱為一名百度開發(fā)者,，按照步驟完善信息即可,。
第三步：
接下來點擊創(chuàng)建應用,。
第四步：
應用名稱填上自己的應用名稱就可以了,，應用類型可以選擇瀏覽器端，下面的Referer白名單參見下面的說明,。我們這里作為學習使用,，填寫一個英文半角的*就OK了。接下來點擊提交,。
第五步：
OK,，獲得秘鑰，就是訪問應用(AK)下面的那一串序列號,?？梢韵萩opy下來備用。
3,、代碼實現(xiàn) 插入百度地圖的方法十分簡單,。
(1)插入JavaScript API (2)插入地圖塊 (3)插入JS代碼創(chuàng)建地圖應用
(1)插入JavaScript API 在頁面
標簽對中引入如下百度地圖JS API:特別注意，以上代碼中的ak=秘鑰處,，秘鑰即為準備工作中申請的秘鑰,，對應復制替換秘鑰二字即可。
另外為了提高網(wǎng)頁的加載速度,，我們可以將上述代碼放在
標簽對中的最后,。這樣會提升頁面的加載速度，但是地圖應用的加載時間同樣會依賴于以上文件的載入速度,。
(2)插入地圖塊我們只需要在插入地圖應用的位置,，插入一個div塊即可,，同時設(shè)定一個id供后續(xù)使用，方式如下：
這樣就可以了,。
(3)插入JS代碼創(chuàng)建地圖應用 在
的末尾插入以下JavaScript代碼段： scripttype='text/javascript'> var map = new BMap.Map('baiduMap');//創(chuàng)建Map實例 var point = new BMap.Point(114.419915,30.513719);//創(chuàng)建Point位置實例 map.centerAndZoom(point, 19); //設(shè)置地圖中心點及縮放級別map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 var marker =new BMap.Marker(point); //創(chuàng)建一個Marker點 map.addOverlay(marker);//將Marker點覆蓋到地圖上 marker.setAnimation(BMAP_ANIMATION_BOUNCE);//使Marker點跳動起來 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放/script> 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 910 代碼第2行創(chuàng)建一個Map實例,；
代碼第3行創(chuàng)建一個Point位置實例，為了確定自己位置的坐標,，可以訪問http://api.map.baidu.com/lbsapi/getpoint/index.html在上面確定自己位置的坐標,。
代碼第4行設(shè)定地圖的中心點，以及縮放級別,，縮放級別會在確定位置坐標的網(wǎng)站上顯示,，這里采用的是19級。
代碼第6~8行,，為了更加清晰地指明自己的位置信息,，我們在地圖上添加一個Marker，同時讓它跳動起來,。見預覽圖片,，中間紅色的Marker指向我們要定位的點，同時會更加醒目地跳動,。
代碼第9行,，開啟鼠標滾輪對地圖縮放的控制。
至此大功告成,。引入百度地圖JSAPI,，然后通過短短8行代碼就可在頁面中實現(xiàn)一個百度地圖的應用。完整代碼如下(只包含地圖應用,，省略了預覽圖片中的其他部分)：
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> 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>scripttype='text/javascript'> var map = new BMap.Map('baiduMap');//創(chuàng)建Map實例 var point = new BMap.Point(114.419915,30.513719);//創(chuàng)建point位置 map.centerAndZoom(point, 19); //設(shè)置地圖中心點及縮放級別map.addControl(new BMap.MapTypeControl()); //添加地圖類型控件 var marker =new BMap.Marker(point); //創(chuàng)建一個Marker點 map.addOverlay(marker);//將Marker點覆蓋到地圖上 marker.setAnimation(BMAP_ANIMATION_BOUNCE);//使Marker點跳動起來 map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放script> body> html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 23 24 25 26 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 2021 22 23 24 25 26將以上代碼復制到html頁面中雙擊運行就行了,。注意，要將以上代碼中相應的位置填入你自己的秘鑰,！
另外需要特別說明的一點是,，如果沒有給地圖指定高度，可能不會在頁面中顯示,，所以最好手動設(shè)置地圖的高度,。
4、相關(guān)鏈接我們這里僅僅使用了百度地圖api的一小部分,，實際上其功能十分強大,。比如GPS定位功能，全景地圖功能,，個性化地圖設(shè)置等功能。
