前端項(xiàng)目中經(jīng)常會(huì)有地圖模塊類的效果,那么作為前端應(yīng)該如何進(jìn)行地圖類模塊呢,下面小編結(jié)合自己的使用經(jīng)歷與百度地圖api開發(fā)文檔所寫的百度地圖api使用教程。
第一步申請(qǐng)百度賬號(hào)和AK
進(jìn)入百度地圖開放平臺(tái)-控制臺(tái)-創(chuàng)建應(yīng)用
應(yīng)用名稱可以隨便取一個(gè),只要符合命名規(guī)范進(jìn)行
應(yīng)用類型根據(jù)自己的項(xiàng)目類型進(jìn)行選擇
白名單由于是自己本地測(cè)試,所以只填*就可以
應(yīng)用內(nèi)容填寫好后進(jìn)行提交
第二步獲得創(chuàng)建項(xiàng)目的AK
第三步將JavaScript文件引用到自己的項(xiàng)目中
這里的密鑰是第二步的Ak
第四步創(chuàng)建地圖容器
設(shè)置地圖容器的寬度與高度,否則看不見地圖哦
第五步設(shè)置地圖中心點(diǎn)以及控件
// 百度地圖API功能
var map = new BMap.Map("container");//獲得地圖容器
var point = new BMap.Point(116.328854,39.959881);//設(shè)置地圖中心點(diǎn)的經(jīng)緯坐標(biāo)
map.centerAndZoom(point, 18);//設(shè)置地圖的縮放比例
//創(chuàng)建標(biāo)記點(diǎn)
var marker = new BMap.Marker(point);
map.addOverlay(marker); // 將標(biāo)注添加到地圖中
詳細(xì)地圖控件見百度地圖開發(fā)平臺(tái)開發(fā)文檔
這樣一個(gè)地圖模塊就可以在自己的項(xiàng)目中呈現(xiàn)了。