百度地圖API基本使用（一）

超Code發表於2021-08-05

地圖API

本文系作者 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方法的引數。