咱們在瀏覽網頁時,會常常看見相應的地圖,這些地圖也支持相應的定位、移動、拖拽等功能(這裏的瀏覽器固然包括移動端的瀏覽器),好比小黃車、滴滴、安居客等平臺的網站。這些平臺網站的地圖是調用相應地圖數據公司的接口嵌入到網頁中的。javascript
本文咱們將對web前端開發過程當中百度地圖API的調用進行介紹。css
web前端html
web前端開發是指利用各類技術手段生成html頁面,經過瀏覽器呈現給用戶。這些技術包含可是不限於HTML,CSS及JavaScript等,以及隨着互聯網發展造成的新的技術html五、css三、ajax、jQuery等技術。前端
當html5
然除了這些,你還須要掌握各類框架,成熟的web前端框架有不少,能夠根據本身的需求進行選擇,其中最主流的即是Bootstrap框架。下面咱們對web前端的技術進行簡單介紹:java
HTMLHTML是web頁面的基礎,是展示網頁的內容框架。他是一種標準語言,可以被瀏覽器內核解讀的標籤語言,是web的核心。HTML只須要可以被瀏覽器內核引擎解讀,因此有很強的跨平臺性,是網絡的基本語言。css3
CSS若是說HTML是建造大樓,那麼css就是裝潢。css是控制HTML中標籤的樣式,使得網頁變得更加美觀,也是web的重要組成部分。web
JavaScriptjavascript是完成對網頁中內容的動態控制,好比網站中點擊後的事件、購物車、用戶名登入等功能,都得須要javascript來實現。javascript是一門編程語言,有相應的數據類型、循環、函數等各類概念(HTML只是標記語言)ajax
申請百度地圖API的key編程
百度地圖的API調用是免費的,並且能夠無限次的調用,可是須要申請鑰匙key,第一步進入百度地圖開發平臺的官網:
找到開發文檔中的javascript API文檔,點擊進入:
在產品簡介裏面找到申請密鑰(ak),點擊進入:
若是是第一次申請,就會進入建立應用界面,填寫相應的信息,經過郵箱激活並接收密鑰。而後就會在應用列表裏看到申請的密鑰信息:
利用javascript對百度API接口進行調用
代碼構成:
其中BMap.Point(114.4, 30.51)表示初始化地圖,設置中心點座標,(114.4, 30.51)就是武漢當前的座標。
上面展現的只是普通的區域展現功能,除此以外,還有不少的功能能夠調用,好比路線規劃:
代碼構成爲: