過幾天公司要做一個項目,裏面有要顯示地圖的需求,對於我這個前端小白來說,沒有經歷過，當然不會做了,不過還好有百度的這個"老師"在,無關乎其他的需求,先把百度地圖展示到頁面上來說再去管其他的。通過不懈的小努力吧,還算可以能展示到h5頁面上了。
下面的是demo的代碼 也是官方的demo代碼
<!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>Baidu Map </title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:40vh;width: 40vw;margin: 50px auto;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的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); // 初始化地圖，設置中心點座標和地圖級別
map.enableScrollWheelZoom(true); //開啓鼠標滾輪縮放
</script>
</body>
</html>
總體來說還是很簡單,主要是要去引入哎百度的 api的 js文件，然後初始化
還有一個關鍵的一點 就是你要去百度地圖官方註冊一個你的 ak祕鑰 才行
https://lbsyun.baidu.com/index.php?title=jspopular/guide/service // 百度地圖api
去控制檯 申請 一個 ak 祕鑰 獲取之前 必須先註冊一個 開發者的身份權限 按照他的指示走就可以
起一個 應用名字 這個自定義
應用名字 就是 瀏覽器端
白名單 你開發着 玩玩 可以填一個 * 所有都可以訪問
獲取一個開發者權限 這個時候 他往你的郵箱裏面發送一個激活的鏈接
激活之後 就會獲取到一個你自己的ak 祕鑰 然後 粘貼到上面的那個 鏈接 ak= 後面
這樣百度地圖就顯示在你的頁面上了
