vue中百度地圖定位及附近搜索功能使用步驟

更新時間：2022年09月06日 16:02:38 作者：阿洋的小窩

這篇文章主要為大家介紹了vue中百度地圖定位及附近搜索功能使用步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1.地圖初始化相關(guān)

文檔:lbs.baidu.com/index.php?t…

申請賬號 => 創(chuàng)建應(yīng)用 => 生成key值 => 引入百度地圖,替換key值

在出口html(public/html)文件下引入標(biāo)簽

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=申請的ak">

2.獲取當(dāng)前定位

文檔:lbsyun.baidu.com/index.php?t…

創(chuàng)建地圖容器可以為其他id名, 但必須有用來展示地圖, 地圖大小與container大小一致

<div id="container">
</div>

獲取當(dāng)前位置

*注意,初始化地圖,獲取定位時,必須在mounted鉤子中,因為要先獲取到地圖容器

對于全局變量需要加上window(腳手架規(guī)則)

 // 地圖獲取當(dāng)前定位
    getPosition(){
      // 創(chuàng)建地圖實例
      const map = new window.BMapGL.Map('container')
      // 創(chuàng)建瀏覽器定位實例
      var geolocation = new window.BMapGL.Geolocation();
      let that = this
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          // 創(chuàng)建點標(biāo)記
          var mk = new BMapGL.Marker(r.point);
          // 在地圖上添加點標(biāo)記
          map.addOverlay(mk);
          // 將地圖平移至中心點
          map.panTo(r.point);
          console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
          that.position.signLongitude = r.point.lng
          that.position.signLatitude = r.point.lat
          // 創(chuàng)建點坐標(biāo)
          const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
          //  初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別
          map.centerAndZoom(point, 30)  
          // 逆向編碼
          var myGeo = new BMapGL.Geocoder();  
          myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){      
            if (result){      
              that.address = result.address // 獲取逆編程的地址結(jié)果
            }      
          });
          }else{
            alert('failed' + this.getStatus());
          }        
      });
    },

釘釘簽到定位完整代碼

<template>
  <div class="sign-in">
    <div v-if="isSign">
      <div class="time-sign">2022年08月26日</div>
      <div class="map-card">
        <div class="title">
          <h3 class="ellipsis"><img class="company" src="../../assets/images/公司@2x.png" alt="">{{address}}</h3> 
          <span class="position" @click="$router.replace(`/map?planId=${$route.query.planId}`)">地址微調(diào)</span>
        </div>
        <div class="map">
          <div id="container">
          </div>
        </div>
      </div>
      <div class="sign-in-box" @click="toSignIn">
        <span>簽到</span>
        <div class="time">{{dateNow}}</div>
        <span class="no-sign">未簽到</span>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import { Toast } from 'vant';
export default {
  name: 'sign-in',
  data () {
    return {
      dateNow: new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
      timer: null,
      isSign:true,
      // 定位地點
      address: this.$route.query.address ||  '',
      // 經(jīng)緯度
      position:{
        // 經(jīng)
        signLongitude:'',
        // 維
        signLatitude:''
      }
    }
  },
  created () {
    this.timer = setInterval(() => {
      const dateNow = Date.now()
      this.dateNow = dayjs(dateNow).format('HH:mm:ss')
    }, 1000)
    if (this.$dd.env.platform === 'notInDingTalk') return
    this.$dd.biz.navigation.setTitle({
      title: '簽到',
      onSuccess: function (res) {
        // 調(diào)用成功時回調(diào)
        console.log(res)
      },
      onFail: function (err) {
        // 調(diào)用失敗時回調(diào)
        console.log(err)
      }
    })
  },
  methods:{
    // 點擊簽到
    toSignIn(){
      if(!this.address) {
        Toast('暫未定位到地址')
        return
      }
      this.isSign = false
    },
    getAddress(address){
      console.log(address);
      this.address = address
    },
    // 地圖獲取當(dāng)前定位
    getPosition(){
      const map = new window.BMapGL.Map('container')
      var geolocation = new window.BMapGL.Geolocation();
      let that = this
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMapGL.Marker(r.point);
          map.addOverlay(mk);
          map.panTo(r.point);
          console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
          const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
          that.position.signLongitude = r.point.lng
          that.position.signLatitude = r.point.lat
          map.centerAndZoom(point, 30)  
          // 逆向編碼
          var myGeo = new BMapGL.Geocoder();  
          myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){      
            if (result){      
              that.address = result.address 
            }      
          });
          }else{
            alert('failed' + this.getStatus());
          }        
      });
    },
    // 展示地圖
    setPosition(){
          // 經(jīng)度
        const signLongitude = this.$route.query.lng
        // 維度
        const signLatitude = this.$route.query.lat
        var map = new BMapGL.Map("container");          // 創(chuàng)建地圖實例 
        var point = new BMapGL.Point(signLongitude , signLatitude);  // 創(chuàng)建點坐標(biāo) 
        map.centerAndZoom(point, 15); 
        // 創(chuàng)建點標(biāo)記
        var marker1 = new BMapGL.Marker(new BMapGL.Point(signLongitude, signLatitude));
        // 在地圖上添加點標(biāo)記
        map.addOverlay(marker1);
    }
  },
  destroyed () {
    clearInterval(this.timer)
  }, 
  mounted () {
    // 有傳來的地址就回顯定位,  無則進行定位
    if(this.address) {
      this.setPosition()
    } else{
      this.getPosition()
    }
    // const point = new window.BMapGL.Point(116.404, 39.915)
    // map.centerAndZoom(point, 30)
  },
}
</script>
<style scoped lang="less">
.sign-in{
  height: 100vh;
  background-color: #F9F9F9;
  #container{
  width: 315px;
  height: 100px;
  }
  .company{
    width: 12px;
    height: 14px;
    margin-right: 5px;
  }
  .position{
    white-space: nowrap;
  }
  .time-sign{
    margin-left: 15px;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: #666666;
  }
  .map-card{
    padding: 15px;
    margin: auto;
    width: 345px;
    height: 180px;
    background-color: #fff;
    border-radius: 12px;
    .title{
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 12px;
      span{
        color: #30A7FA;
        line-height: 1;
      }
    }
    h3{
      height: 32px;
      line-height: 1;
      font-size: 16px;
      border-bottom: 1px solid #f8f8f8;
    }
    .map{
      margin-top: 15px;
    }
  }
  .sign-in-box{
    position: relative;
    margin: auto;
    margin-top: 147px;
    width: 140px;
    height: 140px;
    background-color: #30A7FA;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0px 4px 13px 0px #BDE4FF;
    .time{
      margin-top: 7px;
    }
    .no-sign{
      position: absolute;
      top: 150px;
      color: #999999;
      font-size: 12px;
    }
  }
}
</style>

3.根據(jù)當(dāng)前定位地址附近搜索建議

文檔:lbsyun.baidu.com/jsdemo.htm#…

根據(jù)當(dāng)前定位的結(jié)果,給出建議相關(guān)列表

html相關(guān):

<template>
  <div class="map-page">
    <div id="container-map">
    </div>
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        placeholder="請輸入搜索關(guān)鍵詞"
        @focus="$router.replace(`/searchMap?planId=${$route.query.planId}`)"
      />
    </div>
    <div class="addressList" >
      <van-cell v-for="(item,index) in addressList" :key="index" :value="item.address" @click="chooseMap(item)" />
    </div>
  </div>
</template>

js相關(guān):

  mounted () {
     // 創(chuàng)建地圖實例
    const map = new window.BMapGL.Map('container-map')
    // 創(chuàng)建瀏覽器定位實例
    var geolocation = new window.BMapGL.Geolocation();
    let that = this
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        // 創(chuàng)建點標(biāo)記
        var mk = new BMapGL.Marker(r.point);
        // 在地圖上添加點標(biāo)記
        map.addOverlay(mk);
        // 將地圖平移至中心點
        map.panTo(r.point);
        // console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
        that.lng = r.point.lng
        that.lat = r.point.lat
        console.log(r.point.lng, r.point.lat);
        map.centerAndZoom(point, 30)  
        // 逆向編碼
        var myGeo = new BMapGL.Geocoder();  
        myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){      
          if (result){      
            console.log(result.address);  
            // 獲取到當(dāng)前定位的結(jié)果, 調(diào)用搜索建議
            that.getLocation(result.address)
          }      
        });
        }else{
          alert('failed' + this.getStatus());
        }        
    });
    // const point = new window.BMapGL.Point(116.404, 39.915)
    // map.centerAndZoom(point, 30)
  },
  methods:{
    // 搜索建議
    getLocation(address){
      var map = new BMapGL.Map("container-map");          
      var mPoint = new BMapGL.Point(this.lng, this.lat);  
      map.enableScrollWheelZoom();
      map.centerAndZoom(mPoint,15);
      // 繪制圓形范圍覆蓋物
      var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
        map.addOverlay(circle);
        var local =  new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}}); 
        // 定義搜索地址,以及范圍距離
        local.searchNearby(address,mPoint,1000);
        console.log(local);
        this.addressList = local._arrPois
    },
    // 點擊選擇地址 lng 經(jīng)度  lat 維度 
    chooseMap(addressItem){
      this.addressDetail=addressItem.address
      // 經(jīng)度
      const lng = addressItem.marker.latLng.lng
      // 維度
      const lat = addressItem.marker.latLng.lat
      this.$router.replace(`/signIn?address=${this.addressDetail}&planId=${this.$route.query.planId}&lng=${lng}&lat=${lat}`)
      // that.$emit('getAddress', this.addressDetail)
    }
  }

完整代碼:

<template>
  <div class="map-page">
    <div id="container-map">
    </div>
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        placeholder="請輸入搜索關(guān)鍵詞"
        @focus="$router.replace(`/searchMap?planId=${$route.query.planId}`)"
      />
    </div>
    <div class="addressList" >
      <van-cell v-for="(item,index) in addressList" :key="index" :value="item.address" @click="chooseMap(item)" />
    </div>
  </div>
</template>
<script>
import { Search , Cell} from 'vant'
export default {
  name: 'map-page',
  components:{
    [Search.name]:Search,
    [Cell.name]:Cell,
  },
  data () {
    return {
      value:"",
      lng:0, // 經(jīng)度
      lat:0, // 維度
      // 搜索地址列表
      addressList:[],
      // 詳細地址
      addressDetail:""
    }
  },
  mounted () {
    const map = new window.BMapGL.Map('container-map')
    var geolocation = new window.BMapGL.Geolocation();
    let that = this
    geolocation.getCurrentPosition(function(r){
      if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMapGL.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        // console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
        const point = new window.BMapGL.Point(r.point.lng, r.point.lat)
        that.lng = r.point.lng
        that.lat = r.point.lat
        console.log(r.point.lng, r.point.lat);
        map.centerAndZoom(point, 30)  
        // 逆向編碼
        var myGeo = new BMapGL.Geocoder();  
        myGeo.getLocation(new BMapGL.Point(r.point.lng,r.point.lat), function(result){      
          if (result){      
            console.log(result.address);  
            that.getLocation(result.address)
          }      
        });
        }else{
          alert('failed' + this.getStatus());
        }        
    });
    // const point = new window.BMapGL.Point(116.404, 39.915)
    // map.centerAndZoom(point, 30)
  },
  methods:{
    // 搜索建議
    getLocation(address){
      var map = new BMapGL.Map("container-map");          
      var mPoint = new BMapGL.Point(this.lng, this.lat);  
      map.enableScrollWheelZoom();
      map.centerAndZoom(mPoint,15);
      var circle = new BMapGL.Circle(mPoint,1000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
        map.addOverlay(circle);
        var local =  new BMapGL.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});  
        local.searchNearby(address,mPoint,1000);
        console.log(local);
        this.addressList = local._arrPois
    },
    // 點擊選擇地址 lng 經(jīng)度  lat 維度 
    chooseMap(addressItem){
      this.addressDetail=addressItem.address
      // 經(jīng)度
      const lng = addressItem.marker.latLng.lng
      // 維度
      const lat = addressItem.marker.latLng.lat
      this.$router.replace(`/signIn?address=${this.addressDetail}&planId=${this.$route.query.planId}&lng=${lng}&lat=${lat}`)
      // that.$emit('getAddress', this.addressDetail)
    }
  }
}
</script>
<style scoped lang="less">
// 地圖大小
#container-map{
  width: 100%;
  height: 180px;
}
</style>

以上就是vue中百度地圖定位及附近搜索功能使用步驟的詳細內(nèi)容，更多關(guān)于vue百度地圖定位附近搜索的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: