vue全局接入百度地圖的實現示例
前言
本文主要教大家如何把百度地圖整合到我們的vue項目中
一、獲取ak密鑰
1、登錄網址 https://lbsyun.baidu.com/
注冊百度地圖開放平臺賬號,填寫認證信息,并且創(chuàng)建應用
創(chuàng)建完應用后可以在類似界面獲取到我們的AK密鑰
注意:IP白名單要合理配置
我這里為了方便測試才設置的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{ // 百度地圖信息設置 // 地址信息 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; // 根據坐標逆解析地址 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;
總結
到此這篇關于vue全局接入百度地圖的實現示例的文章就介紹到這了,更多相關vue全局接入百度地圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程
這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02vue template中slot-scope/scope的使用方法
今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理
這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理,需要的朋友可以參考下2017-03-03