Vue利用vue-baidu-map實現(xiàn)獲取經(jīng)緯度和搜索地址

更新時間：2022年09月22日 15:03:14 作者：格斗家不愛在外太空沉思

在開發(fā)項目的時候，發(fā)現(xiàn)需要獲取經(jīng)緯度，由于這個項目是用vue寫的，最后決定使用vue-baidu-map來快速獲取經(jīng)緯度，感興趣的可以了解一下

1.申請百度地圖密鑰

搜索'百度地圖開放平臺'，選擇頭部導航欄開發(fā)文檔里的JavaScript API

然后點擊申請密鑰

2.安裝vue-baidu-map

終端運行

npm install vue-baidu-map --save

main.js里全局注冊

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地圖開發(fā)者平臺申請的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

引入組件,初始化地圖，開啟鼠標滾輪控制地圖縮放

<template>
  <baidu-map id="allmap" @ready="mapReady" :scroll-wheel-zoom="true">
  </baidu-map>
</template>

<script>
export default {
    methods: {
        //地圖初始化
        mapReady({ BMap, map }) {
          this.point = new BMap.Point(113.27, 23.13); // 選擇一個經(jīng)緯度作為中心點
          map.centerAndZoom(this.point, 12); //設置地圖中心點和縮放級別
          this.BMap=BMap
          this.map=map
        }
    }
}
</script>

<style>
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>

一個簡單的地圖就出來了

3.獲取經(jīng)緯度

3.1 為地圖添加點擊事件,獲取經(jīng)緯度

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
  </baidu-map>
</template>

<script>
export default {
    data () {
        return {
          infoWindowShow:false,
          longitude:'',
          latitude:'',
        }
      },
    methods: {
        getLocation(e){
          this.longitude=e.point.lng
          this.latitude=e.point.lat
          this.infoWindowShow=true
        },
    }
}
</script>

3.2 添加BmInfoWindow信息窗口組件和BmMarker標注,點擊地圖時彈出

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>緯度:{{this.latitude}}</p>
          <p>經(jīng)度:{{this.longitude}}</p>
      </bm-info-window>
  </baidu-map>
</template>

3.3 添加BmAutoComplete組件，輸入地址自動補全

<template>
  <baidu-map id="allmap" @ready="mapReady" @click="getLocation" :scroll-wheel-zoom="true">
      <div style="display:flex;justify-content:center;margin:15px">
          <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
            <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="輸入地址"></el-input>
          </bm-auto-complete>
          <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
      </div>
      <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker>
      <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>緯度:{{this.latitude}}</p>
          <p>經(jīng)度:{{this.longitude}}</p>
      </bm-info-window>
  </baidu-map>
</template>

3.4 最后點擊搜索按鈕地圖跳轉到搜索位置并打開信息窗口和標注

<script>
export default {
    data () {
        return {
          infoWindowShow:false,
          longitude:'',
          latitude:'',
        }
      },
    methods: {
        getBaiduMapPoint(){
          let that=this
          let myGeo = new this.BMap.Geocoder()
          //逆地址解析
          myGeo.getPoint(this.searchJingwei,function(point){
            if(point){
              that.map.centerAndZoom(point,15)
              that.latitude=point.lat
              that.longitude=point.lng
              that.infoWindowShow=true
            }
          })
        },
    }
}
</script>

最后放上全部代碼

<template>
  <div>
      <baidu-map
        style="display:flex;flex-direction: column-reverse;" 
        id="allmap"
        @ready="mapReady"
        @click="getLocation"
        :scroll-wheel-zoom="true"
      >
        <div style="display:flex;justify-content:center;margin:15px">
          <bm-auto-complete v-model="searchJingwei" :sugStyle="{zIndex: 999999}">
            <el-input v-model="searchJingwei" style="width:300px;margin-right:15px" placeholder="輸入地址"></el-input>
          </bm-auto-complete>
          <el-button type="primary" @click="getBaiduMapPoint">搜索</el-button>
        </div>
        <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
        <bm-marker v-if="infoWindowShow" :position="{lng: longitude, lat: latitude}">
          <bm-label content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
        </bm-marker>
        <bm-info-window :position="{lng: longitude, lat: latitude}" :show="infoWindowShow" @clickclose="infoWindowClose">
          <p>緯度:{{this.latitude}}</p>
          <p>經(jīng)度:{{this.longitude}}</p>
        </bm-info-window>
      </baidu-map>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchJingwei:'',
      infoWindowShow:false,
      longitude:'',
      latitude:'',
      point:''
    }
  },
  methods: {
    //地圖初始化
    mapReady({ BMap, map }) {
      // 選擇一個經(jīng)緯度作為中心點
      this.point = new BMap.Point(113.27, 23.13);
      map.centerAndZoom(this.point, 12);
      this.BMap=BMap
      this.map=map
    },
    //點擊獲取經(jīng)緯度
    getLocation(e){
      this.longitude=e.point.lng
      this.latitude=e.point.lat
      this.infoWindowShow=true
    },
    getBaiduMapPoint(){
      let that=this
      let myGeo = new this.BMap.Geocoder()
      myGeo.getPoint(this.searchJingwei,function(point){
        if(point){
          that.map.centerAndZoom(point,15)
          that.latitude=point.lat
          that.longitude=point.lng
          that.infoWindowShow=true
        }

      })
    },
    //信息窗口關閉
    infoWindowClose(){
      this.latitude=''
      this.longitude=''
      this.infoWindowShow=false
    },
  },
}
</script>

<style lang="scss" scoped>
#allmap{
  height: 450px;
  width: 100%;
  margin: 10px 0;
}
</style>

最終實現(xiàn)效果

到此這篇關于Vue利用vue-baidu-map實現(xiàn)獲取經(jīng)緯度和搜索地址的文章就介紹到這了,更多相關Vue vue-baidu-map經(jīng)緯度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

解決nuxt 自定義全局方法,全局屬性,全局變量的問題
這篇文章主要介紹了解決nuxt 自定義全局方法,全局屬性,全局變量的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue中的inject學習教程
本文通過實例代碼給大家介紹了vue中的inject學習教程，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-04-04
vue如何自定義按鈕單選和多選
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue實現(xiàn)無限級樹形選擇器
這篇文章主要介紹了Vue實現(xiàn)無限級樹形選擇器，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下
2022-09-09
Element的Message彈窗重復彈出問題解決
本文主要介紹了Element的Message彈窗重復彈出，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue express鑒權零基礎入門
這篇文章主要介紹了詳解express鑒權，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
vue引入cesium問題
這篇文章主要介紹了vue引入cesium問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue中實現(xiàn)點擊變成全屏的多種方法
這篇文章主要介紹了vue中實現(xiàn)點擊變成全屏的多種方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-09-09
vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能
這篇文章主要介紹了vue實現(xiàn)表單未編輯或未保存離開彈窗提示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-04-04
vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化之nextTick使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09