vue全局接入百度地圖的實(shí)現(xiàn)示例
前言
本文主要教大家如何把百度地圖整合到我們的vue項(xiàng)目中
一、獲取ak密鑰
1、登錄網(wǎng)址 https://lbsyun.baidu.com/
注冊(cè)百度地圖開(kāi)放平臺(tái)賬號(hào)，填寫(xiě)認(rèn)證信息，并且創(chuàng)建應(yīng)用
創(chuàng)建完應(yīng)用后可以在類(lèi)似界面獲取到我們的AK密鑰
注意：IP白名單要合理配置
我這里為了方便測(cè)試才設(shè)置的0.0.0.0/0
二、整合步驟
獲取到ak密鑰之后就可以與我們的VUE項(xiàng)目進(jìn)行整合
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. 頁(yè)面引入
代碼如下（示例）：
data(){
return{
// 百度地圖信息設(shè)置
// 地址信息
address: null,
center: {lng: 0, lat: 0},
//地圖展示級(jí)別
zoom: 13,
}
}
methods: {
handler({BMap, map}) {
this.center.lng = 116.419878;
this.center.lat = 39.956823;
this.zoom = this.zoom;
},
getClickInfo(e) {
// 創(chuàng)建地理編碼實(shí)例
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>
效果圖
有一個(gè)點(diǎn)需要注意在方法里進(jìn)行逆解析地址的時(shí)候記得要在逆解析方法外 獲取this值let _this = this;
總結(jié)
到此這篇關(guān)于vue全局接入百度地圖的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)vue全局接入百度地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue定義在computed的變量無(wú)法更新問(wèn)題及解決
這篇文章主要介紹了vue定義在computed的變量無(wú)法更新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
之前對(duì)于vue中用到過(guò)的checkbox也只是別人寫(xiě)好的組件，這次在自己實(shí)現(xiàn)時(shí)走了很多坑，特意寫(xiě)這篇文章記錄到腳本之家平臺(tái)，供大家參考2018-11-11
vue react中的excel導(dǎo)入和導(dǎo)出功能
當(dāng)我們把信息化系統(tǒng)給用戶(hù)使用時(shí)，用戶(hù)經(jīng)常需要把以前在excel里錄入的數(shù)據(jù)導(dǎo)入的信息化系統(tǒng)里，這樣為用戶(hù)提供了很大的方便，這篇文章主要介紹了vue中或者react中的excel導(dǎo)入和導(dǎo)出,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue+element遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用Vite+Vue3+TypeScript?搭建開(kāi)發(fā)腳手架的詳細(xì)過(guò)程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開(kāi)發(fā)腳手架的詳細(xì)過(guò)程，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02
vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了以element-ui基礎(chǔ)封裝大文件上傳的組件,包括斷點(diǎn)續(xù)傳,秒傳,上傳進(jìn)度條,封裝思想邏輯來(lái)源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下2024-01-01
vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理
這篇文章主要介紹了vuejs開(kāi)發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉(zhuǎn)的問(wèn)題處理,需要的朋友可以參考下2017-03-03
vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn)
本文主要介紹了vue單頁(yè)面SEO優(yōu)化的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06