百度地圖API基本使用（一）
本文系作者 chaoCode原創，轉載請私信並在文章開頭附帶作者和原文地址鏈接。
違者，作者保留追究權利。
前言
由於最近項目有需要，所以最近開始研究百度地圖API的使用，簡單的介紹一下百度地圖JavaScript API它的使用，希望能夠對小夥伴們有所幫助，後續有機會再做深入的研究。
有興趣的小夥伴可以自行查找百度地圖API
百度地圖開放平台開發文檔中的JavaScript API
準備工作
在使用百度地圖之前，我們需要擁有一個自己的百度帳號，申請註冊成為百度開發者，然後我們需要創建一個瀏覽器端應用，就可以獲取到一個唯一的服務秘鑰（AK）
申請秘鑰
1. 首先我們在我的應用中，點擊創建應用
2. 在創建應用的時候我們需要注意應用類型需要我們需要的類型，因為我的是web項目需要，所以這個應用類型我選擇的是瀏覽器端，還有其他應用類型，根據自己的需要自行選擇。還有就是這個Referer白名單的設置，根據自己的需求，按照下面的提示，自行配置，這裡我為了方便是沒有對任何域名做限制，使用的是*
3. 提交之後會在我的應用看到我們需要的秘鑰(AK)
- 到這裡我們的準備工作已經完成了，此時我們已經有了屬於自己專屬的一個訪問秘鑰(AK)，所以我們接下來就可以通過簡單的一個html來使用到我們百度API，去看一看百度地圖API的一些使用，廢話不多說，我們開始。
百度地圖的實現
1. 首先我們創建一個Hello.html文件
2. 在html中引用百度API（請將自己申請的秘鑰（AK）填充一下）
<script type="text/javascript" src="//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="//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方法的參數。
相關程式碼如下：
var styleJson = [];
map.setMapStyleV2({styleJson:styleJson});
設置後地圖效果如下:
上面這些都是一些簡單的使用，後續我在使用的過程中遇到的一些問題以及解決過程，新的API的使用會持續更新分享，百度地圖的API開發文檔給的還是很全面的，不過就是目前他提供的都是一些在線開發，對於一些內網的公司就不太友好了，所以後續這塊我需要去做一下離線開發的研究，等我把離線地圖開發弄好之後，再給大家分享。
感謝諸君的觀看，文中如有紕漏，歡迎在評論區來交流。如果這篇文章幫助到了你，歡迎點贊👍和關注。
