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