怎樣在前端專案中進行地圖類模組的設計？

摘要： 前端專案中經常會有地圖模組類的效果，那麼作為前端應該如何進行地圖類模組呢，下面小編結合自己的使用經歷與百度地圖api開發文件所寫的百度地圖api使用教程。 第一步申請百度賬號和AK 進入百度地圖開放平臺-控制檯-建立應用 應用名稱可以隨便取一個，只要符合命名規範進行 應用型...

前端專案中經常會有地圖模組類的效果，那麼作為前端應該如何進行地圖類模組呢，下面小編結合自己的使用經歷與百度地圖api開發文件所寫的百度地圖api使用教程。

第一步申請百度賬號和AK

進入百度地圖開放平臺-控制檯-建立應用

應用名稱可以隨便取一個，只要符合命名規範進行

應用型別根據自己的專案型別進行選擇

白名單由於是自己本地測試，所以只填*就可以

應用內容填寫好後進行提交

第二步獲得建立專案的AK

第三步將JavaScript檔案引用到自己的專案中

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的金鑰"></script>

這裡的金鑰是第二步的Ak

第四步建立地圖容器

<div id="container"></div>

設定地圖容器的寬度與高度，否則看不見地圖哦

第五步設定地圖中心點以及控制元件

<script type="text/javascript">

// 百度地圖API功能

var map = new BMap.Map("container");//獲得地圖容器

var point = new BMap.Point(116.328854,39.959881);//設定地圖中心點的經緯座標

map.centerAndZoom(point, 18);//設定地圖的縮放比例

//建立標記點

var marker = new BMap.Marker(point);

map.addOverlay(marker); // 將標註新增到地圖中

</script>

詳細地圖控制元件見百度地圖開發平臺開發文件

這樣一個地圖模組就可以在自己的專案中呈現了。