Vue項(xiàng)目中使用百度地圖api的詳細(xì)步驟
1.百度開發(fā)者認(rèn)證
進(jìn)入百度地圖開放平臺(tái) 官網(wǎng)，（認(rèn)證需要身份證號(hào)碼，人臉識(shí)別，手機(jī)百度APP，郵箱地址）
注冊(cè)登錄完成，在控制臺(tái)可以進(jìn)行開發(fā)者認(rèn)證。
2.創(chuàng)建應(yīng)用
在應(yīng)用管理中可以創(chuàng)建應(yīng)用，應(yīng)用類型需要選擇瀏覽器端，Referer白名單如果只是測(cè)試版本，可以先使用*，只有該白名單中的網(wǎng)站才能成功發(fā)起調(diào)用。
創(chuàng)建完成就會(huì)生成一個(gè)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.展示地圖
展示地圖也有一個(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)文章
詳解如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vuex，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue表單輸入綁定的示例代碼，本文使用v-model指令在表單input創(chuàng)建雙向數(shù)據(jù)綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
Vue使用JsonView進(jìn)行JSON數(shù)據(jù)展示
Vue-JSON-Viewer 是一個(gè)用于在Vue項(xiàng)目中展示JSON數(shù)據(jù)的組件,它解決了在項(xiàng)目開發(fā)中面臨的展示JSON數(shù)據(jù)的需求,下面就跟隨小編一起來了解下它的具體使用吧2025-03-03
這次給大家?guī)韛ue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項(xiàng)有哪些？本文通過實(shí)戰(zhàn)案例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-09-09
這篇文章主要介紹了vue install 注冊(cè)全局組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js的安裝方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
el-select二次封裝實(shí)現(xiàn)可分頁加載數(shù)據(jù)的示例代碼
使用el-select時(shí)一次性渲染幾百條數(shù)據(jù)時(shí)會(huì)造成頁面克頓, 可以通過分頁來實(shí)現(xiàn),所以本文給大家介紹了el-select二次封裝實(shí)現(xiàn)可分頁加載數(shù)據(jù),文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
Vue3?路由配置與導(dǎo)航實(shí)戰(zhàn)教程
Vue?Router?提供了強(qiáng)大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導(dǎo)航操作,從安裝到實(shí)戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下2025-03-03
element?ui中的table表格數(shù)據(jù)是動(dòng)態(tài)生成的,最近遇到個(gè)需求,要求我們對(duì)單元格進(jìn)行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式
這篇文章主要介紹了vue腳手架配置預(yù)渲染及prerender-spa-plugin配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05