本文系作者 chaoCode原創，轉載請私信并在文章開頭附帶作者和原文地址鏈接，

違者，作者保留追究權利，

前言

由于最近專案有需要，所以最近開始研究百度地圖API的使用，簡單的介紹一下百度地圖JavaScript API它的使用，希望能夠對小伙伴們有所幫助，后續有機會再做深入的研究，

有興趣的小伙伴可以自行查找百度地圖API

百度地圖開放平臺開發檔案中的JavaScript API

準備作業

在使用百度地圖之前，我們需要擁有一個自己的百度賬號，申請注冊成為百度開發者，然后我們需要創建一個瀏覽器端應用，就可以獲取到一個唯一的服務秘鑰（AK）

申請秘鑰

申請秘鑰（AK）

1. 首先我們在我的應用中，點擊創建應用

2. 在創建應用的時候我們需要注意應用型別需要我們需要的型別，因為我的是web專案需要，所以這個應用型別我選擇的是瀏覽器端，還有其他應用型別，根據自己的需要自行選擇，還有就是這個Referer白名單的設定，根據自己的需求，按照下面的提示，自行配置，這里我為了方便是沒有對任何域名做限制，使用的是*

3. 提交之后會在我的應用看到我們需要的秘鑰(AK)

到這里我們的準備作業已經完成了，此時我們已經有了屬于自己專屬的一個訪問秘鑰(AK)，所以我們接下來就可以通過簡單的一個html來使用到我們百度API，去看一看百度地圖API的一些使用，廢話不多說，我們開始，

百度地圖的實作

1. 首先我們創建一個Hello.html檔案

2. 在html中參考百度API（請將自己申請的秘鑰（AK）填充一下）

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>

3. 創建一個地圖容器元素

<div id="container"></div>

4. 設定一下頁面以及容器的一些樣式

<style type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 
</style>

5. 創建一個地圖實體

<script type="text/javascript">

// 創建地圖實體 
var map = new BMap.Map("container");

// 創建點坐標 （北京天安門坐標）
var point = new BMap.Point(116.404, 39.915);

// 初始化地圖，設定中心點坐標和地圖級別 
map.centerAndZoom(point, 15);

</script>

最終html中的內容如下:

<!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 type="text/css"> 
html{height:100%} 
body{height:100%;margin:0px;padding:0px} 
#container{height:100%} 
</style> 
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script>
</head> 
  
<body> 
<div id="container"></div>
<script type="text/javascript">

// 創建地圖實體 
var map = new BMap.Map("container");

// 創建點坐標 （北京天安門坐標）
var point = new BMap.Point(116.404, 39.915);

// 初始化地圖，設定中心點坐標和地圖級別 
map.centerAndZoom(point, 15);

</script> 
</body> 
</html>

6. 百度地圖的簡單實作

實作效果如下：可以進行移動和放大

百度地圖API詳解

1. 創建容器

根據id去獲取對應的元素就是我們后續百度地圖所要去填充的元素，其實創建容器的時候還有一個coordsType屬性去控制坐標的型別，不過我們不配置的話一般都是默認配置為5也就是bd0ll坐標型別，感興趣的小伙伴可以去看一看這些坐標型別都有哪些？可以來評論區交流學習

var map = new BMap.Map('container');

// coordsType指定輸入輸出的坐標型別，3為gcj02坐標，5為bd0ll坐標，默認為5，
// 指定完成后API將以指定的坐標型別處理您傳入的坐標 
var map = new BMap.Map("container", {
       coordsType: 5 
});

2. 設定中心點

有兩種設定中心點的方式，一種是通過上面那樣根據經緯度去設定中心點坐標，第二種就是根據城市名作為中心點

Ps：map是我們的容器不要忘了

// 1.根據經緯度設定中心點
// 創建點坐標 （北京天安門坐標）
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

// 2.根據城市設定
// 使用城市名稱當做中間點
map.centerAndZoom('北京', 12);

3. 設定Zoom值

//Zoom值是控制地圖放大和縮小的的一個范圍，這個值我們是可以控制的

var map = new BMap.Map("mapContent",{minZoom:4,maxZoom:8}); map.centerAndZoom('北京', 15);

4.開啟滑鼠滾輪縮放

// 默認的地圖是只可以滑鼠拖動的，滑鼠滾輪不會修改Zoom值

map.enableScrollWheelZoom(true);

5.JSAPI商用授權掛件默認開啟，關閉需要修改呼叫JSAPI的代碼，方式有兩種

1.初始化地圖時，進行關閉配置

var map = new BMap.Map('container', {
    enableBizAuthLogo: false
});

2.使用地圖的方法進行配置

var map = new BMap.Map('container');
map.disableBizAuthLogo(); //關閉
map.enableBizAuthLogo(); //開啟

6.添加地圖掛件

1.地圖初始化

添加控制元件前，地圖需要進行初始化，例如，要將標準地圖控制元件添加到地圖中，可在代碼中添加如下內容：

var map = new BMap.Map("container");    
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);    
map.addControl(new BMap.NavigationControl());

2.添加多個控制元件

在本例中我們向地圖添加一個平移縮放控制元件、一個比例尺控制元件和一個縮略圖控制元件，在地圖中添加控制元件后，它們即刻生效，

map.addControl(new BMap.NavigationControl());    
map.addControl(new BMap.ScaleControl());    
map.addControl(new BMap.OverviewMapControl());    
map.addControl(new BMap.MapTypeControl());    
map.setCurrentCity("北京"); // 僅當設定城市資訊時，MapTypeControl的切換功能才能可用

初始化控制元件時，可提供一個可選引數，其中的anchor和offset屬性共同控制控制元件在地圖上的位置， anchor表示控制元件的停靠位置，即控制元件停靠在地圖的哪個角，當地圖尺寸發生變化時，控制元件會根據停靠位置的不同來調整自己的位置，

var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));

7.個性化地圖

個性化地圖樣式編輯器

通過樣式ID呼叫個性化地圖樣式（推薦）

1.創建個性化地圖樣式

進入地圖開放平臺控制臺頁面，在我的地圖中，創建一個地圖樣式：

2.編輯樣式

點擊創建的地圖樣式，進入樣式編輯器，根據您的需求自由編輯地圖樣式：

3.發布樣式并獲取樣式ID

完成編輯后，在我的地圖或者編輯器中發布該地圖樣式，獲取發布后生成的樣式ID：

4.在JavaScript API中應用地圖樣式

將第三步中獲取的樣式ID作為setMapStyleV2方法的引數，

相關代碼如下：

map.setMapStyleV2({     
  styleId: '3d71dc5a4ce6222d3396801dee06622d'
});

注意：
1.使用個性化地圖前，請參考Hello World構建基礎地圖；
2.setMapStyleV2方法需要在地圖初始化（centerAndZoom）完成后執行；
3.樣式更新不會改變樣式ID，因此如果有更新樣式的需求，重新編輯發布就可以完成更新，不需要修改JavaScript API呼叫代碼；
4.如果樣式ID在控制臺中被洗掉，但JavaScript API還在繼續呼叫，那么將會渲染默認樣式的地圖；

通過樣式JSON呼叫個性化地圖樣式

1.獲取樣式JSON

前序流程和樣式ID呼叫地圖樣式流程一致，進入我的地圖，創建一個地圖樣式，進入編輯器編輯完成后，直接通過編輯器中的“下載JSON”功能獲取JSON代碼：

2.在JavaScript API中應用地圖樣式

將上一步中獲取的樣式JSON作為setMapStyleV2方法的引數，