百度地圖簡單示例
1 調用官方API
打開百度地圖開放平台
百度地圖開放平台
2 建立一個應用
輸入名字：uil（取一個好聽的名字）
應用類型：浏覽器端（這裡為了友善）
白名單：*（允許誰通路）
3 檢視自己建立的應用
4 進入API
初學建議看官方文檔
5 官方示例DEMO
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地圖展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微軟雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
</head>
<body>
<div class = "info">最新版GL地圖命名空間為BMapGL, 可按住滑鼠右鍵控制地圖旋轉、修改傾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 建立Map執行個體
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12); // 初始化地圖,設定中心點坐标和地圖級别
map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放
</script>
看下效果
6 手動搭建
6.1 适應移動端頁面展示
添加meta标簽，使頁面更好的在平台上展示。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6.2 設定容器樣式
設定容器樣式大小，使地圖充滿整個浏覽器視窗：
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style>
6.3 引用百度地圖插件
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密鑰"></script>
6.4 建立地圖容器元素
地圖需要一個HTML元素作為容器，這樣才能展現到頁面上。這裡我們建立了一個div元素。
<div id="container"></div>
6.5 建立地圖執行個體
位于BMapGL命名空間下的Map類表示地圖，通過new操作符可以建立一個地圖執行個體。其參數可以是元素id也可以是元素對象。
var map = new BMapGL.Map("container");
注意：
1、在調用此構造函數時應確定容器元素已經添加到地圖上；
2、命名空間 API GL版使用BMapGL作為命名空間，所有類均在該命名空間之下，比如：BMapGL.Map、BMapGL.Control、BMapGL.Overlay；
6.6 設定中心點坐标
這裡我們使用BMapGL命名空間下的Point類來建立一個坐标點。Point類描述了一個地理坐标點，其中116.404表示經度，39.915表示緯度。（為天安門坐标）
var point = new BMapGL.Point(116.404, 39.915);
注意：
在使用百度地圖JavaScript API服務時，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）進行展示，需先将其他坐标轉換為BD09，詳細說明請參考坐标轉換說明，請勿使用非官方的轉換方法。
6.7 初始化設定級别
在建立地圖執行個體後，我們需要對其進行初始化，BMapGL.Map.centerAndZoom()方法要求設定中心點坐标和地圖級别。 地圖必須經過初始化才可以執行其他操作
map.centerAndZoom(point, 15);
百度地圖API一共分為19級，比例尺分别為：
[1:20米（簡稱20米，後同），50米，100米，200米，500米，1公裡，2公裡，5公裡，10公裡，20公裡，25公裡，50公裡，100公裡，200公裡，500公裡，1000公裡，2000公裡，5000公裡，10000公裡]
分别對應：
[19級，18級，17級，16級，15級，14級，13級，12級，11級，10級，9級，8級，7級，6級，5級，4級，3級，2級，1級]
6.8 開放滑鼠滑輪
開啟滑鼠滾輪縮放
map.enableScrollWheelZoom(true);
至此，我們就快速建立了一張以天安門為中心的地圖。
附上源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 設定meta字元集和縮放-->
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<!-- 标題-->
<title>手動搭建第一個百度地圖</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=1.0&&type=webgl&ak=GoOnKfPYhUnKlNpVGS7YMrgwzbOxOZYe">
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
<script>
// 建立地圖執行個體
const map = new BMapGL.Map("container");
// 建立點坐标
const point = new BMapGL.Point(116.404, 39.915);
// 初始化地圖，設定中心點坐标和地圖級别
// 地圖級别越大越清晰
map.centerAndZoom(point, 12);
// 開啟滑鼠滾輪縮放
map.enableScrollWheelZoom(true);
//平移到
map.panTo(new BMap.Point(110.351,20.002));
//設定中心坐标
map.setCenter(110.351,20.002);
</script>
7 拓展
7.1 setCenter()
預設我們是以天安門為中心，其實我們可以進行修改中心坐标
7.2 panTo()
平移
7.3 zoomTo()
縮放
以上是調用百度地圖的簡單案例，詳情請到官網檢視，謝謝~