欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue全局接入百度地圖的實現示例

 更新時間:2022年03月20日 16:25:55   作者:RobertTeacher  
本文主要介紹了vue全局接入百度地圖的實現示例,文中根據實例編碼詳細介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下

前言

本文主要教大家如何把百度地圖整合到我們的vue項目中

一、獲取ak密鑰

1、登錄網址 https://lbsyun.baidu.com/

注冊百度地圖開放平臺賬號,填寫認證信息,并且創(chuàng)建應用

百度地圖AK

創(chuàng)建完應用后可以在類似界面獲取到我們的AK密鑰

注意:IP白名單要合理配置

百度地圖IP白名單

我這里為了方便測試才設置的0.0.0.0/0

二、整合步驟

獲取到ak密鑰之后就可以與我們的VUE項目進行整合

1、npm下載包

代碼如下(示例):

npm install --save vue-baidu-map --registry=https://registry.npm.taobao.org 

npm下載百度地圖

2、在main.js文件引入

代碼如下(示例):

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  // ak密鑰
  ak: 'pYNskAU5yNDInxABaC3agTroXNy6wKEY'
})
    

main.js引入百度地圖

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue定義在computed的變量無法更新問題及解決

    vue定義在computed的變量無法更新問題及解決

    這篇文章主要介紹了vue定義在computed的變量無法更新問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • checkbox在vue中的用法小結

    checkbox在vue中的用法小結

    之前對于vue中用到過的checkbox也只是別人寫好的組件,這次在自己實現時走了很多坑,特意寫這篇文章記錄到腳本之家平臺,供大家參考
    2018-11-11
  • vue react中的excel導入和導出功能

    vue react中的excel導入和導出功能

    當我們把信息化系統(tǒng)給用戶使用時,用戶經常需要把以前在excel里錄入的數據導入的信息化系統(tǒng)里,這樣為用戶提供了很大的方便,這篇文章主要介紹了vue中或者react中的excel導入和導出,需要的朋友可以參考下
    2023-09-09
  • vue+element遇到的坑及解決

    vue+element遇到的坑及解決

    這篇文章主要介紹了vue+element遇到的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • 使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程

    使用Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程

    這篇文章主要介紹了Vite+Vue3+TypeScript?搭建開發(fā)腳手架的詳細過程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • vue template中slot-scope/scope的使用方法

    vue template中slot-scope/scope的使用方法

    今天小編就為大家分享一篇vue template中slot-scope/scope的使用方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 基于element-ui自定義封裝大文件上傳組件的案例分享

    基于element-ui自定義封裝大文件上傳組件的案例分享

    本文主要介紹了以element-ui基礎封裝大文件上傳的組件,包括斷點續(xù)傳,秒傳,上傳進度條,封裝思想邏輯來源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下
    2024-01-01
  • vue項目部署跨域問題的詳細解決過程

    vue項目部署跨域問題的詳細解決過程

    一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-05-05
  • vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理

    vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理

    這篇文章主要介紹了vuejs開發(fā)組件分享之H5圖片上傳、壓縮及拍照旋轉的問題處理,需要的朋友可以參考下
    2017-03-03
  • vue單頁面SEO優(yōu)化的實現

    vue單頁面SEO優(yōu)化的實現

    本文主要介紹了vue單頁面SEO優(yōu)化的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06

最新評論