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

目录

• 1.地图初始化相关
• 2.获取当前定位
• 3.根据当前定位地址附近搜索建议

1.地图初始化相关

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

申请账号 => 创建应用 => 生成key值 => 引入百度地图,替换key值

在出口html(public/html)文件下引入标签

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

2.获取当前定位

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

创建地图容器 可以为其他id名, 但必须有 用来展示地图, 地图大小与container大小一致

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

获取当前位置

*注意,初始化地图,获取定位时,必须在mounted钩子中,因为要先获取到地图容器

对于全局变量需要加上window(脚手架规则)

 // 地图获取当前定位
    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);
          that.position.signLongitude = r.point.lng
          that.position.signLatitude = r.point.lat
          // 创建点坐标
          const point = new window.BMapGL.Point(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){
              that.address = result.address // 获取逆编程的地址结果
            }
          });
          }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}`)">地址微调</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 ||  '',
      // 经纬度
      position:{
        // 经
        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) {
        // 调用成功时回调
        console.log(res)
      },
      onFail: function (err) {
        // 调用失败时回调
        console.log(err)
      }
    })
  },
  methods:{
    // 点击签到
    toSignIn(){
      if(!this.address) {
        Toast('暂未定位到地址')
        return
      }
      this.isSign = false
    },
    getAddress(address){
      console.log(address);
      this.address = address
    },
    // 地图获取当前定位
    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(){
          // 经度
        const signLongitude = this.$route.query.lng
        // 维度
        const signLatitude = this.$route.query.lat
        var map = new BMapGL.Map("container");          // 创建地图实例
        var point = new BMapGL.Point(signLongitude , signLatitude);  // 创建点坐标
        map.centerAndZoom(point, 15);
        // 创建点标记
        var marker1 = new BMapGL.Marker(new BMapGL.Point(signLongitude, signLatitude));
        // 在地图上添加点标记
        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.根据当前定位地址附近搜索建议

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

根据当前定位的结果,给出建议相关列表

html相关:

<template>
  <div class="map-page">
    <div id="container-map">
    </div>
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        placeholder="请输入搜索关键词"
        @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相关:

  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 经度  lat 维度
    chooseMap(addressItem){
      this.addressDetail=addressItem.address
      // 经度
      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="请输入搜索关键词"
        @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, // 经度
      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 经度  lat 维度
    chooseMap(addressItem){
      this.addressDetail=addressItem.address
      // 经度
      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中百度地图定位及附近搜索功能使用步骤的详细内容，更多关于vue百度地图定位附近搜索的资料请关注我们其它相关文章！