Vue項目中使用百度地圖api的詳細步驟

更新時間：2022年10月28日 11:28:48 作者：至尊絕倫

在之前的一個小項目中,用到的顯示當?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可供學習。

如果在vue中的index.html中引入api之后，在項目中就可以使用了。

var map = new BMapGL.Map("container");          // 創(chuàng)建地圖實例 
var point = new BMapGL.Point(116.404, 39.915);  // 創(chuàng)建點坐標 
map.centerAndZoom(point, 15);                 // 初始化地圖，設(shè)置中心點坐標和地圖級別

這是使用的案例，有幾個需要注意的事項：

要把這段代碼放到Mounted生命周期里面；
要拿到展示地圖的那個實例，可以用ref拿到；
設(shè)置展示地圖的實例的寬高；
創(chuàng)建點坐標可以修改。

至此，簡單使用百度地圖API已經(jīng)完成了。

總結(jié)

到此這篇關(guān)于Vue項目中使用百度地圖api的文章就介紹到這了,更多相關(guān)Vue使用百度地圖api內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解如何實現(xiàn)一個簡單的 vuex
本篇文章主要介紹了如何實現(xiàn)一個簡單的 vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
Vue表單輸入綁定的示例代碼
這篇文章主要介紹了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
vue-cli3.0配置及使用注意事項詳解
這次給大家?guī)韛ue-cli3.0配置詳解，使用vue-cli3.0配置的注意事項有哪些？本文通過實戰(zhàn)案例給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2018-09-09
vue install 注冊全局組件方式
這篇文章主要介紹了vue install 注冊全局組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue.js的安裝方法
這篇文章主要為大家詳細介紹了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
Vue3?路由配置與導航實戰(zhàn)教程
Vue?Router?提供了強大的路由管理能力,幫助開發(fā)者輕松構(gòu)建流暢、高效的單頁應(yīng)用,本文將帶你深入探討?Vue3?中的路由配置與導航操作,從安裝到實戰(zhàn),手把手教你掌握?Vue?Router?的使用技巧,需要的朋友可以參考下
2025-03-03
Element?UI中table單元格合并的解決過程
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