Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟
1.百度開(kāi)發(fā)者認(rèn)證
進(jìn)入百度地圖開(kāi)放平臺(tái) 官網(wǎng)，（認(rèn)證需要身份證號(hào)碼，人臉識(shí)別，手機(jī)百度APP，郵箱地址）
注冊(cè)登錄完成，在控制臺(tái)可以進(jìn)行開(kāi)發(fā)者認(rèn)證。
2.創(chuàng)建應(yīng)用
在應(yīng)用管理中可以創(chuàng)建應(yīng)用，應(yīng)用類(lèi)型需要選擇瀏覽器端，Referer白名單如果只是測(cè)試版本，可以先使用*，只有該白名單中的網(wǎng)站才能成功發(fā)起調(diào)用。
創(chuàng)建完成就會(huì)生成一個(gè)AK。
3.引用百度地圖API文件
在JavaScript開(kāi)放文檔中有教程，可以根據(jù)教程來(lái)引用。
如果我們要在vue中使用，我們需要將這代碼段放到html文件中。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=您的密鑰"> </script>
需要修改里面的ak值，就是上面創(chuàng)建應(yīng)用生成的ak值。
4.展示地圖
展示地圖也有一個(gè)demo可供學(xué)習(xí)。
如果在vue中的index.html中引入api之后，在項(xiàng)目中就可以使用了。
var map = new BMapGL.Map("container"); // 創(chuàng)建地圖實(shí)例
var point = new BMapGL.Point(116.404, 39.915); // 創(chuàng)建點(diǎn)坐標(biāo)
map.centerAndZoom(point, 15); // 初始化地圖，設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
這是使用的案例，有幾個(gè)需要注意的事項(xiàng)：
- 要把這段代碼放到Mounted生命周期里面；
- 要拿到展示地圖的那個(gè)實(shí)例，可以用ref拿到；
- 設(shè)置展示地圖的實(shí)例的寬高；
- 創(chuàng)建點(diǎn)坐標(biāo)可以修改。
至此，簡(jiǎn)單使用百度地圖API已經(jīng)完成了。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目中使用百度地圖api的文章就介紹到這了,更多相關(guān)Vue使用百度地圖api內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問(wèn)題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目webpack打包后iconfont文件路徑的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級(jí)聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了在vue-cli項(xiàng)目中如何使用swiper問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
fullcalendar日程管理插件月份切換回調(diào)處理方案
這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
vue中使用axios請(qǐng)求post接口發(fā)送兩次
這篇文章主要為大家介紹了vue中使用axios請(qǐng)求post接口,請(qǐng)求會(huì)發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Vue中保存數(shù)據(jù)到磁盤(pán)文件的方法
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤(pán)文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue框架提供了前端開(kāi)發(fā)組件的思想，可以通過(guò)組件來(lái)組合成一個(gè)完整的頁(yè)面，都是隨著組件數(shù)量原來(lái)越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
Vue自定義指令實(shí)現(xiàn)對(duì)數(shù)字進(jìn)行千分位分隔
對(duì)數(shù)字進(jìn)行千分位分隔后展示應(yīng)該是大部分同學(xué)都做過(guò)的功能了吧,常規(guī)的做法通常是編寫(xiě)一個(gè)工具函數(shù)來(lái)對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換,那么我們可不可以通過(guò)vue指令來(lái)實(shí)現(xiàn)這一功能呢,下面我們就來(lái)探索一下呢2024-02-02
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)vue實(shí)現(xiàn)打印功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
對(duì)于vue來(lái)說(shuō)，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無(wú)法互相引用，一般來(lái)說(shuō)，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)2022-12-12