编程宝库 - 技术改变世界

编程宝库

Search

JS编程技术

JS前端同源策略和跨域及防抖节流详解

JavaScript 字符串新增方法 trim() 的使用说明

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

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百度地图定位附近搜索的资料请关注编程宝库其它相关文章！

下一节：JavaScript 字符串新增方法 trim() 的使用说明

JS 编程技术

文章导读：这篇文章给大家讲解在 ES5 中字符串新增方法之一：trim()，这个方法用于对空白字符的处理，这篇文章带给大家这个方法的用法以及其使用用途。一：trim ...

JS前端同源策略和跨域及防抖节流详解

JavaScript 字符串新增方法 trim() 的使用说明