前端 - 百度地圖 API 基礎入門
請各位讀者添加一下做者的微信公衆號，之後有新的文章，將在微信公衆號直接推送給各位，很是感謝。
javascript
##1.前言css
最近想完成一個網站，裏面須要使用地圖相關的內容。html
通過多方考慮，決定使用百度地圖來完成，因此將整個學習歷程進行簡單的整理，方便朋友們來快速入門。java
本文系做者 李鵬（MR_LP）原創，轉載請私信並在文章開頭附帶做者和原文地址連接。git
違者，做者保留追究權利。api
注：若代碼中存在部分圖片沒法顯示，請移步簡書.瀏覽器
##2.獲取密鑰安全
百度地圖JavaScript API是一套由JavaScript語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持PC端和移動端基於瀏覽器的地圖應用開發，且支持HTML5特性的地圖開發。
該套API免費對外開放。自v1.5版本起，您需先申請密鑰（ak）纔可以使用，接口（除發送短信功能外）無使用次數限制。微信
上述話術出自百度地圖，咱們從上面的描述中也能夠了解到，咱們在使用百度地圖以前首先須要去註冊一個屬於本身的密鑰。app
打開該網站後，咱們須要進行如下操做。
- 登陸百度帳號
- 建立應用
-
- 須要注意，咱們當前只是進行一次測試，因此在白名單中直接書寫一個 星號便可（*）。
- 須要注意，建立的時候須要將 JavaScript API 選項進行勾選。
-
查看 AK
-
- 須要注意，請勿將這個 AK 展現給其餘人，由於我這裏只是給你們展現效果，因此就先不打碼了。
-
##3. 獲取JavaScript API服務方法
截止做者開始書寫以前，百度地圖 API 的版本爲 V 2.0。
咱們在獲取 API 以前須要首先完成註冊 AK 纔可成功加載API JS文件。
ak的使用方法以下：
//參數v表示您加載API的版本，使用JavaScript APIv1.4及之前版本可以使用此方式引用。
http://api.map.baidu.com/api?v=1.4
//使用JavaScript APIv2.0請先申請密鑰ak，按此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密鑰複製代碼
其中須要注意：
- JavaScript API v1.4及之前版本無須申請密鑰（ak）。
- 若是在實際開發中，須要獲取更高配額，請點擊申請認證企業用戶。
最後，關於在引入的時候，有可能出現權限驗證失敗。
具體致使這個問題的緣由可能出自如下三種狀況。
- 還沒有在API控制檯申請ak，即'...ak=';
- 密鑰設置錯誤。
- 如E4805d16520de693a3fe707cdc962045爲正確的ak
- 可是設置時輸入的ak爲E4805d16520de693a3fe707cdc962045xx;
- 密鑰未經過白名單，以下圖的ak在非baidu.com域名下會報錯。
- API控制檯關閉JavaScript API時會報錯;
-
- 錯誤的使用「服務端AK」用於 JavaScript API，JS API只支持瀏覽器類型的ak（自2016年1月15日升級）
最後附上進入 百度地圖 API javascript 的實例代碼。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
<!--使用V2.0版本的引用方式-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY&s=1" type="text/javascript" charset="utf-8"></script>
<!--
1. 若是使用JavaScript API ，須要加一個特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密鑰&s=1；
2. 對於Web API 無需加特殊字段，直接使用 HTTPS協議訪問便可，如Geocoding：
https://api.map.baidu.com/geocoder/v2/?ak=你的祕鑰
&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
3. 若是對數據安全要求高，建議使用 POST請求，避免把請求參數放到 URI中敏感信息被泄露；
-->
<!--爲了讓頁面以正常比例進行顯示而且禁止用戶縮放頁面的操做-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
</body>
</html>
<!--
個人祕鑰
應用編號 應用名稱 訪問應用（AK） 應用類別 備註信息（雙擊更改） 應用配置
9290542 Test bsNyezahIIgpUIjvYe51BKXzy1FXozUY 瀏覽器端 設置 刪除
-->複製代碼
##4. 關於 百度地圖 HTTPS 的說明
JavaScript API首家支持Https，已全面開放，無需申請Https服務可直接使用。
配置：
- 若是使用JavaScript API ，須要加一個特殊字段 (s=1)：
api.map.baidu.com/api?v=2.0&a… - 對於Web API 無需加特殊字段，直接使用 HTTPS協議訪問便可，如Geocoding：
api.map.baidu.com/geocoder/v2… - 若是對數據安全要求高，建議使用 POST請求，避免把請求參數放到 URI中敏感信息被泄露。
##5. 百度地圖的兼容性
- 瀏覽器：
- IE 6.0+
- Firefox 3.6+
- Opera 9.0+
- Safari 3.0+
- Chrome
- 操做系統：
- Windows
- Mac
- Linux
- 移動平臺：
- iPhone
- Android
請各位開發者注意本身當前開發須要兼容的版本。
##6. 第一個小案例
在開始以前，我們首先經過一段實例代碼進行效果的展現。
<!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>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
//v1.4版本及之前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密鑰&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
/*
建立地圖實例
* 位於BMap命名空間下的Map類表示地圖，經過new操做符能夠建立一個地圖實例。
* 其參數能夠是元素id也能夠是元素對象。
* 注意在調用此構造函數時應確保容器元素已經添加到地圖上。*/
var map = new BMap.Map("container");
/*
建立點座標
* 這裏咱們使用BMap命名空間下的Point類來建立一個座標點。
* Point類描述了一個地理座標點，其中116.404表示經度，39.915表示緯度。*/
var point = new BMap.Point(116.404, 39.915);
/*
地圖初始化
* 在建立地圖實例後，咱們須要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點座標和地圖級別。
* 地圖必須通過初始化才能夠執行其餘操做。*/
map.centerAndZoom(point, 15);
/*
下面示例顯示一個地圖，等待兩秒鐘後，它會移動到新中心點。
* panTo()
* 將讓地圖平滑移動至新中心點，若是移動距離超過了當前地圖區域大小，則地圖會直跳到該點。
* zoomTo()
*
* setCenter()
*
* */
window.setTimeout(function(){
map.panTo(new BMap.Point(116.450, 39.918));
}, 1000);
/*
默認狀況下地圖不支持鼠標滾輪縮放操做，由於這樣可能會影響整個頁面的用戶體驗，
可是若是您但願在地圖中使用鼠標滾輪控制縮放，則能夠調用map.enableScrollWheelZoom方法來開啓。
配置選項能夠在Map類參考的配置方法一節中找到。
* */
</script>
</html>複製代碼
能夠看到，咱們若是須要使用百度地圖，有至少三步操做須要完成。
- 建立地圖實例
- 建立點座標
- 地圖初始化
在代碼的最後段，放上一個方法，咱們經過一個超時調用，在 1 秒以後，讓地圖進行平移。
須要注意一個小問題，若是跳轉的點處於當前初始的地圖的顯示範圍時，則地圖會進行平移，不然就是從新繪製當前地圖。
最後顯示效果以下：
##7. 百度地圖控件
這時候咱們發現，咱們已經在當前頁面實現了一個小的地圖，可是咱們卻發現一個小問題。
爲何個人地圖上空空一片呀。
這是由於咱們尚未向百度地圖中添加咱們須要的控件。
地圖API中提供的控件有：
- Control：控件的抽象基類，全部控件均繼承此類的方法、屬性。經過此類您可實現自定義控件。
- NavigationControl：地圖平移縮放控件，PC端默認位於地圖左上方，它包含控制地圖的平移和縮放的功能。移動端提供縮放控件，默認位於地圖右下方。
- OverviewMapControl：縮略地圖控件，默認位於地圖右下方，是一個可摺疊的縮略地圖。
- ScaleControl：比例尺控件，默認位於地圖左下方，顯示地圖的比例關係。
- MapTypeControl：地圖類型控件，默認位於地圖右上方。
- CopyrightControl：版權控件，默認位於地圖左下方。
- GeolocationControl：定位控件，針對移動端開發，默認位於地圖左下方。
那麼接下來咱們就開始向地圖中去添加控件。
###7.1 添加控件
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript" charset="utf-8"> /* 向地圖添加控件 * 可使用Map.addControl()方法向地圖添加控件。 * 在此以前地圖須要進行初始化。 * 例如，要將標準地圖控件添加到地圖中，可在代碼中添加以下內容：*/ var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); </script> </html>複製代碼
實現效果以下：
咱們會發現，在咱們的地圖左上角出現了一個新的控件，咱們能夠經過這個控件去實現對地圖的方法以及縮小。
除此以外，咱們還能夠添加其餘地圖控件。
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title> <style type="text/css"> html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript" charset="utf-8"> /* 向地圖添加控件 * 可使用Map.addControl()方法向地圖添加控件。 * 在此以前地圖須要進行初始化。 * 例如，要將標準地圖控件添加到地圖中，可在代碼中添加以下內容：*/ var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // map.addControl(new BMap.NavigationControl()); /* 能夠向地圖添加多個控件。 在本例中咱們向地圖添加一個平移縮放控件、一個比例尺控件和一個縮略圖控件。 在地圖中添加控件後，它們即刻生效。 * */ //地圖平移縮放控件 map.addControl(new BMap.NavigationControl()); //比例尺控件 map.addControl(new BMap.ScaleControl()); //縮略地圖控件 map.addControl(new BMap.OverviewMapControl()); //地圖類型控件 map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 僅當設置城市信息時，MapTypeControl的切換功能才能可用 </script> </html>複製代碼
能夠看到，咱們在原始的縮放控件以後去新增了三個新的控件。
實現效果以下：
除此以外，咱們還能夠設置地圖空間所顯示的位置和偏移。
###7.2 控件的顯示位置和偏移
ControlAnchor 此常量表示控件的定位。
| 常量 | 描述 |
|---|---|
| BMAP_ANCHOR_TOP_LEFT | 控件將定位到地圖的左上角 |
| BMAP_ANCHOR_TOP_RIGHT | 控件將定位到地圖的右上角 |
| BMAP_ANCHOR_BOTTOM_LEFT | 控件將定位到地圖的左下角 |
| BMAP_ANCHOR_BOTTOM_RIGHT | 控件將定位到地圖的右下角 |
實例代碼：
//地圖平移縮放控件
map.addControl(new BMap.NavigationControl({
anchor:BMAP_ANCHOR_TOP_RIGHT
}));複製代碼
除了指定停靠位置外，還能夠經過偏移量來指示控件距離地圖邊界有多少像素。
若是兩個控件的停靠位置相同，那麼控件可能會重疊在一塊兒，這時就能夠經過偏移值使兩者分開顯示。
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));複製代碼
同時，咱們還能夠修改控件的配置。
###7.3 控件的顯示方式
NavigationControlType此常量表示平移縮放控件的類型。
| 常量 | 描述 |
|---|---|
| BMAP_NAVIGATION_CONTROL_LARGE | 標準的平移縮放控件（包括平移、縮放按鈕和滑塊） |
| BMAP_NAVIGATION_CONTROL_SMALL | 僅包含平移和縮放按鈕 |
| BMAP_NAVIGATION_CONTROL_PAN | 僅包含平移按鈕 |
| BMAP_NAVIGATION_CONTROL_ZOOM | 僅包含縮放按鈕 |
實例代碼：
//地圖平移縮放控件
map.addControl(new BMap.NavigationControl({
//僅包含平移按鈕
type:BMAP_NAVIGATION_CONTROL_PAN
}));複製代碼
###7.4 關於百度地圖控件的示例
最後放出一個關於百度定位相關控件的案例。
<!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 {width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{width:100%;height:100%;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 添加帶有定位的導航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE類型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 啓用顯示定位
enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("當前定位地址爲：" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失敗事件
alert(e.message);
});
map.addControl(geolocationControl);
</script>複製代碼
代碼效果以下：
##8. 後記
其實今天只是介紹了一下百度最基礎的部分。
除此以外，百度地圖還能夠去使用其餘的特殊操做。
- 覆蓋物
- 事件
- 地圖圖層
- 工具
- 服務
- 用戶數據圖層
- 全景圖展示
- 定製個性地圖
最後感謝百度地圖的開發工程師。
轉載請於文章開頭處註明做者和原文連接，不然保留法律追究權利。
##附錄：
A ： 鼠標滾輪縮放地圖
<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=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> <title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom("重慶",12); map.enableScrollWheelZoom(); //啓用滾輪放大縮小，默認禁用 map.enableContinuousZoom(); //啓用地圖慣性拖拽，默認禁用 </script>複製代碼
實現效果：
###B : 查詢顯示位置
<!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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";font-size:14px;}
#l-map{height:300px;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">請輸入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",12); // 初始化地圖,設置城市和地圖級別。
var ac = new BMap.Autocomplete( //創建一個自動完成的對象
{"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠標放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠標點擊下拉列表後的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){
map.clearOverlays(); //清除地圖上全部覆蓋物
function myFun(){
var pp = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加標註
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>複製代碼
代碼效果：
###C ： 根據經緯度肯定位置
<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{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鵬 -> QQ : 3206064928 (請勿非法轉載)</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
經度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
緯度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="查詢" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
map.enableScrollWheelZoom(true);
// 用經緯度設置地圖中心點
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 建立標註
map.addOverlay(marker); // 將標註添加到地圖中
map.panTo(new_point);
}
}
</script>複製代碼
實現效果：
相關文章
- 1. 百度地圖API入門1-申請百度API key
- 2. 百度地圖API新手入門
- 3. 基於百度地圖api + AngularJS 的入門地圖
- 4. 【web端】百度地圖api
- 5. 百度地圖api入門，創建使用百度地圖api及控件
- 6. 百度地圖API
- 7. 百度地圖api
- 8. 百度地圖API學習（01）：基本入門指南
- 9. 百度地圖 api
- 10. ----百度地圖api----
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Rust 基礎語法 - RUST 教程
- • YAML 入門教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 百度地圖API入門1-申請百度API key
- 2. 百度地圖API新手入門
- 3. 基於百度地圖api + AngularJS 的入門地圖
- 4. 【web端】百度地圖api
- 5. 百度地圖api入門，創建使用百度地圖api及控件
- 6. 百度地圖API
- 7. 百度地圖api
- 8. 百度地圖API學習（01）：基本入門指南
- 9. 百度地圖 api
- 10. ----百度地圖api----