1注冊百度賬號，在頁面申請密鑰(AK)
申請百度賬號和ak。應(yīng)用名稱可以自己隨便取一個名字，只要符合其命名規(guī)范即可。應(yīng)用類型需要選擇瀏覽器端。由于是本地自己使用，我就將白名單設(shè)為*。點(diǎn)擊提交去激活。激活成功后就會獲得相關(guān)的ak。
image.png
http://lbsyun.baidu.com/apiconsole/key?application=key
2頁面引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
3地圖需要一個HTML元素作為容器，這樣才能展現(xiàn)到頁面上。這里我們創(chuàng)建了一個div元素。
<body>
<div id = "container"></div>
</body>
4設(shè)置地圖中心點(diǎn)
這里我們使用BMap命名空間下的Point類來創(chuàng)建一個坐標(biāo)點(diǎn)。Point類描述了一個地理坐標(biāo)點(diǎn)，其中116.404表示經(jīng)度，39.915表示緯度。（為天安門坐標(biāo)）
var point = new BMap.Point(116.404, 39.915);
5地圖初始化，同時設(shè)置地圖展示級別
在創(chuàng)建地圖實例后，我們需要對其進(jìn)行初始化，BMap.Map.centerAndZoom()方法要求設(shè)置中心點(diǎn)坐標(biāo)和地圖級別。 地圖必須經(jīng)過初始化才可以執(zhí)行其他操作。
map.centerAndZoom(point, 15);
//百度地圖API功能
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根據(jù)坐標(biāo)初始化地圖
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //平移縮放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //縮略地圖 map.addControl(new BMap.MapTypeControl()); //地圖類型
map.setCurrentCity("杭州"); // 僅當(dāng)設(shè)置城市信息時，MapTypeControl的切換功能才能可用
//添加標(biāo)注
var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756)); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
</script>
至此，地圖已經(jīng)可以顯示了。
image.png
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- baidu map -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#container {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=你的密鑰"></script>
</head>
<body>
<div id = "container"></div>
</body>
</html>
<script type="text/javascript">
//百度地圖API功能
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(120.378386,30.309756),15);//根據(jù)坐標(biāo)初始化地圖
map.enableScrollWheelZoom(true);
map.addControl(new BMap.NavigationControl()); //平移縮放控件
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //縮略地圖
map.addControl(new BMap.MapTypeControl()); //地圖類型
map.setCurrentCity("鄭州"); // 僅當(dāng)設(shè)置城市信息時，MapTypeControl的切換功能才能可用
//添加標(biāo)注
var marker = new BMap.Marker(new BMap.Point(120.378386,30.309756)); // 創(chuàng)建標(biāo)注
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
</script>
