Vue-Baidu Map獲取選中點(diǎn)的經(jīng)緯度以及詳細(xì)地址

小魚兒心語 :

無論生活怎樣，都不要忘記微笑，愿你成為自己的太陽，無需憑借誰的光。

今天給大家分享下在 Vue 項(xiàng)目中使用 Baidu Map 的詳細(xì)過程！??！

一、注冊百度賬號以及密鑰（ak）

一、注冊百度賬號
二、申請成為百度開發(fā)者
三、獲取服務(wù)密鑰（ak）
四、使用相關(guān)服務(wù)功能

大家此時一定有很多疑問，申請（ak）到底要怎么填寫呢？

申請（ak）究竟怎么填呢.png

1、應(yīng)用名稱：這個就填寫項(xiàng)目的英文簡稱就可以，這個可以隨意一點(diǎn)，例如：我們是主做物流這塊的，所以我填的是：“l(fā)ogistics”！
2、應(yīng)用類型：我本人選擇的是 瀏覽器端，這個具體看你們公司的項(xiàng)目類型把！
3、Referer白名單：格式：*.mysite.com*,*myapp.com* 多個域名之間請用英文半角逗號隔開； 如果呢項(xiàng)目正處在測試階段的話就設(shè)置為英文半角星號* 就可以了?。?！
二、快速上手

安裝

npm install vue-baidu-map --save

使用

  • 全局注冊

main.js文件

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

index.html 文件

該文件如果項(xiàng)目目錄中沒有的話，也可能在某個文件夾內(nèi)，一定有哦，耐心找找?。?！

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密鑰"></script>
  • 局部注冊

如果有按需引入組件的需要，可以選擇局部注冊百度地圖組件，局部注冊的 BaiduMap 組件必須聲明 ak 屬性。 所有的獨(dú)立組件均存放在 components 文件夾下，按需引用即可。

三、具體實(shí)操
<template>
  <el-dialog slot="—" :title="title" :width="width" :visible.sync="showMapComponent" top="5vh" custom-class="baidu-map" @close="cancel">
    <baidu-map
      :style="mapStyle"
      ak="你的密鑰"
      :map-click="false"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @ready="onBaiduMapReady"
      @zoomend="syncCenterAndZoom"
    >
      <bm-view style="width: 100%; height: 100%;" />
      <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sug-style="{zIndex: 999999}">
          <el-input v-model="keyword" type="text" placeholder="請輸入地名關(guān)鍵字" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </bm-auto-complete>
      </bm-control>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" show-address-bar auto-location />
      <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
    </baidu-map>
    <span slot="footer">
      <el-button icon="el-icon-close" @click="cancel">取 消</el-button>
      <el-button icon="el-icon-place" type="primary" @click="confirm">確 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker, BmGeolocation } from 'vue-baidu-map'
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation
  },
  props: {
    // 在子組件中使用 props 選項(xiàng)去接收來自父組件傳遞過來的數(shù)據(jù)
    dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 450
    },
    title: {
      type: String,
      default: '選擇目標(biāo)位置'
    },
    width: {
      type: [Number, String],
      default: '85%'
    },
    height: {
      type: [Number, String],
      default: '80%'
    }
  },
  data: function() {
    return {
      BMap: null, // 地圖組件是否就緒
      showMapComponent: this.dialogVisible,
      keyword: '', // 地區(qū)搜索的信息
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: { lng: 116.404, lat: 39.915 },
      choosedLocation: { province: '', city: '', district: '', addr: '' },
      zoom: 15
    }
  },
  watch: {
    dialogVisible: function(currentValue) {
      this.showMapComponent = currentValue
      if (currentValue) {
        this.keyword = ''
      }
    }
  },
  methods: {
    // ready事件：在你需要二次開發(fā)或手動控制其子組件，可以使用在此事件中使用返回的 BMap 類和 map 實(shí)例進(jìn)行手動控制
    onBaiduMapReady(e) {
      console.log('返回BMap類和map實(shí)例', e)
      const that = this
      this.BMap = e.BMap
      if (this.BMap) {
        // 獲取定位地址信息并賦值給聲明變量
        // Geolocation 對象的 getCurrentPosition()、watchPosition()、clearWatch() 方法詳解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
        const geolocation = new this.BMap.Geolocation()
        // 通過 getCurrentPosition() 方法：獲取當(dāng)前的位置信息
        geolocation.getCurrentPosition(res => {
          console.log('返回詳細(xì)地址和經(jīng)緯度', res)
          const { lng, lat } = res.point
          const { province, city, district, street, street_number } = res.address

          that.center = { lng, lat }
          that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
        })
      }
    },

    /** *
     * 地圖點(diǎn)擊事件。
     */
    getClickInfo(e) {
      // 調(diào)整地圖中心位置
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat

      // 此時已經(jīng)可以獲取到BMap類
      if (this.BMap) {
        const that = this
        // Geocoder() 類進(jìn)行地址解析
        // 創(chuàng)建地址解析器的實(shí)例
        const geoCoder = new this.BMap.Geocoder()
        // getLocation() 類--利用坐標(biāo)獲取地址的詳細(xì)信息
        // getPoint() 類--獲取位置對應(yīng)的坐標(biāo)
        geoCoder.getLocation(e.point, function(res) {
          console.log('獲取經(jīng)緯度', e.point, '獲取詳細(xì)地址', res)
          const addrComponent = res.addressComponents
          const surroundingPois = res.surroundingPois
          const province = addrComponent.province
          const city = addrComponent.city
          const district = addrComponent.district
          let addr = addrComponent.street
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`
            } else {
              addr += `${surroundingPois[0].title}`
            }
          } else {
            addr += addrComponent.streetNumber
          }
          that.choosedLocation = { province, city, district, addr, ...that.center }
        })
      }
    },

    syncCenterAndZoom(e) {
      // 返回地圖當(dāng)前的縮放級別
      this.zoom = e.target.getZoom()
    },
    /** *
     * 確認(rèn)
     */
    confirm: function() {
      this.showMapComponent = false
      this.$emit('map-confirm', this.choosedLocation)
    },
    /** *
     * 取消
     */
    cancel: function() {
      this.showMapComponent = false
      this.$emit('cancel', this.showMapComponent)
    }
  }
}
</script>

<style lang="scss">
.baidu-map {
  .el-dialog__body {
    padding: 5px !important;
  }
}
</style>

最后效果如下所示：


百度地圖示例.png

  • 接下來呢，我給大家詳細(xì)解析下我所引入得各個組件含義

  • BaiduMap —— 局部注冊
  • BmControl —— 允許開發(fā)者自由定制控件
  • BmView—— 渲染地圖視圖
    1、BmView 用于渲染百度地圖實(shí)例可視化區(qū)域的容器，通常與 LocalSearch 等會輸出其它視圖的組件結(jié)合使用；
    2、當(dāng) BaiduMap 組件中沒有掛載 BmView 組件時，百度地圖實(shí)例將渲染在 <baidu-map> 節(jié)點(diǎn)上;
    3、當(dāng) BaiduMap 組件中掛載了 BmView 組件時，百度地圖實(shí)例將渲染在 <bm-view> 節(jié)點(diǎn)上；
    4、每個 BaiduMap 組件應(yīng)對應(yīng)唯一一個 BmView 組件，如果聲明了多個 BmView 組件，只有第一個能被正常渲染；
    5、該組件主要用于控制布局，除了能夠渲染地圖視圖之外，沒有任何其它用途。
  • BmAutoComplete—— 自動填充組件
    1、因?yàn)樗亩ㄖ菩暂^差，如果對檢索框沒有高級的UI定制需求，就使用這個就好了，將返回的數(shù)據(jù)配合您自定義的UI組件進(jìn)行開發(fā)；
    2、自動填充組件彈出的檢索框有時會被其它層覆蓋，此時需要在 sugStyle 屬性中聲明 zIndex 加以調(diào)整。
  • BmLocalSearch—— 地區(qū)檢索
  • BmMarker—— 自定義覆蓋點(diǎn)、標(biāo)記點(diǎn)
  • BmGeolocation—— 地區(qū)定位控件
  • BmNavigation—— 導(dǎo)航控件

  • 接下來呢，我給大家詳細(xì)解析下我所使用的各個標(biāo)簽、以及標(biāo)簽內(nèi)的屬性的含義

1、標(biāo)簽帶el的是 element-UI 插件中的組件
2、標(biāo)簽帶bm的是 VUE BAIDU MAP 百度地圖中引用的組件
  • <el-dialog></el-dialog>—— 彈出一個對話框
    1、custom-class：Dialog 的自定義類名；
    2、slot="-" : 表示dialog的內(nèi)容；
    3、slot="footer" ：Dialog 按鈕操作區(qū)的內(nèi)容
  • <baidu-map></baidu-map>—— 百度地圖容器
    1、用于掛載百度地圖核心類和一個百度地圖實(shí)例，是所有地圖組件的根組件；
    2、實(shí)質(zhì)上是一個空的DOM節(jié)點(diǎn)，可以用于掛載 BmView 組件或其它DOM節(jié)點(diǎn)或組件；
    3、如果你需要二次開發(fā)或者是手動控制其子組件，可以使用在 ready 事件中使用返回的 BMap 類和 map 實(shí)例進(jìn)行手動控制，來獲取想要的數(shù)據(jù)；
    4、ready事件：在你需要二次開發(fā)或手動控制其子組件，可以使用在此事件中使用返回的 BMap 類和 map 實(shí)例進(jìn)行手動控制；
    5、moving： 地圖移動過程中觸發(fā)此事件；
    6、moveend：地圖移動結(jié)束時觸發(fā)此事件;
    7、zoomend：地圖更改縮放級別結(jié)束時觸發(fā)此事件;
    8、ak：百度地圖開發(fā)者平臺申請的密鑰，僅在局部注冊組件時聲明;
    9、center：此處我使用對象形式如：{lng：'',lat:''} 表示經(jīng)緯度，也可以使用如：'太原市萬柏林區(qū)'的地區(qū)字符串;
    10、zoom：表示縮放等級;
    11、scroll-wheel-zoom：允許鼠標(biāo)滾輪縮放;
    12、map-click：允許點(diǎn)擊，該項(xiàng)僅在地圖組件掛載時加載一次。
  • <bm-view></bm-view>—— 渲染一個地圖實(shí)例
    1、當(dāng) BaiduMap 掛載了 BmView 組件時，百度地圖實(shí)例將渲染在 <bm-view> 節(jié)點(diǎn)上;
    2、每個 BaiduMap 組件應(yīng)對應(yīng)唯一一個 BmView 組件，如果聲明了多個 BmView 組件，只有第一個能被正常渲染;
    3、該組件主要用于控制布局。除了能夠渲染地圖視圖以外，沒有任何其它用途。
  • <bm-marker></bm-marker>—— 自定義覆蓋點(diǎn)：紅色點(diǎn)
    1、:dragging="true"：允許拖拽;
    2、animation="BMAP_ANIMATION_BOUNCE"：反復(fù)彈跳;
  • <bm-navigation></bm-navigation>—— 縮放控件
    1、anchor="BMAP_ANCHOR_TOP_RIGHT"：控件?？康奈恢?
  • <bm-control></bm-control>—— 自定義控件
    1、:offset="{width: '10px', height: '10px'}"：控制偏移量;
  • <bm-auto-complete></bm-auto-complete>—— 自動填充組件
    1、因?yàn)樗亩ㄖ菩暂^差，如果對檢索框沒有高級的UI定制需求，就使用這個就好了，將返回的數(shù)據(jù)配合您自定義的UI組件進(jìn)行開發(fā);
    2、彈出的檢索框有時會被其它層覆蓋，此時需要在 sugStyle 屬性中聲明 zIndex 加以調(diào)整;
  • <bm-geolocation></bm-geolocation>—— 定位組件
    1、anchor-- 控件停靠位置;
    2、showAddressBar-- 默認(rèn)顯示定位信息面板;
    3、autoLocation-- 添加控件時是否進(jìn)行定位，默認(rèn)不定位;
  • <bm-local-search></bm-local-search>—— 地區(qū)檢索
    1、keyword-- 搜索關(guān)鍵字;
    2、autoViewport-- 檢索結(jié)束后是否自動調(diào)整地圖視野;
    3、panel-- 是否展現(xiàn)檢索結(jié)果面板;

好了，今天就跟大家分享到這里了，有不懂的或是有技術(shù)瑕疵的盡情留言哦，同時也希望能夠幫助到剛接觸百度地圖的寶寶們~~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容