vue全局接入百度地圖的實現(xiàn)示例
更新時間：2022年03月20日 16:25:55 作者：RobertTeacher
本文主要介紹了vue全局接入百度地圖的實現(xiàn)示例，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
本文主要教大家如何把百度地圖整合到我們的vue項目中
一、獲取ak密鑰
1、登錄網(wǎng)址 https://lbsyun.baidu.com/
注冊百度地圖開放平臺賬號，填寫認證信息，并且創(chuàng)建應(yīng)用
創(chuàng)建完應(yīng)用后可以在類似界面獲取到我們的AK密鑰
注意：IP白名單要合理配置
我這里為了方便測試才設(shè)置的0.0.0.0/0
二、整合步驟
獲取到ak密鑰之后就可以與我們的VUE項目進行整合
1、npm下載包
代碼如下（示例）：
npm install --save vue-baidu-map --registry=https://registry.npm.taobao.org
2、在main.js文件引入
代碼如下（示例）：
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak密鑰
ak: 'pYNskAU5yNDInxABaC3agTroXNy6wKEY'
})
3. 頁面引入
代碼如下（示例）：
data(){
return{
// 百度地圖信息設(shè)置
// 地址信息
address: null,
center: {lng: 0, lat: 0},
//地圖展示級別
zoom: 13,
}
}
methods: {
handler({BMap, map}) {
this.center.lng = 116.419878;
this.center.lat = 39.956823;
this.zoom = this.zoom;
},
getClickInfo(e) {
// 創(chuàng)建地理編碼實例
const myGeo = new BMap.Geocoder();
let _this = this;
// 根據(jù)坐標(biāo)逆解析地址
myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), function (result) {
if (result) {
_this.form.warehouseLocation = result.address
}
});
this.center.lng = e.point.lng;
this.center.lat = e.point.lat;
}
}
<style>
.mapbox {
width: 100%;
height: 100%;
}
</style>
效果圖
有一個點需要注意在方法里進行逆解析地址的時候記得要在逆解析方法外 獲取this值let _this = this;
總結(jié)
到此這篇關(guān)于vue全局接入百度地圖的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue全局接入百度地圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解為element-ui的Select和Cascader添加彈層底部操作按鈕
這篇文章主要介紹了詳解為element-ui的Select和Cascader添加彈層底部操作按鈕，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
本文主要介紹了vue-socket.io使用教程與踩坑記錄，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))
這篇文章主要介紹了Vue中的路由跳轉(zhuǎn)(返回、刷新、跳轉(zhuǎn))方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
下面小編就為大家分享一篇解決Vue打包之后文件路徑出錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10
vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決
這篇文章主要介紹了vue-cli創(chuàng)建項目時由esLint校驗導(dǎo)致報錯或警告的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在vue2中提供了.sync修飾符,但是在vue3中不再支持.sync,取而代之的是v-model,本文給大家介紹在Vue2中v-model和.sync區(qū)別,感興趣的朋友一起看看吧2023-10-10