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