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

目录

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

1.地图初始化相关

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

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

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

3.根据当前定位地址附近搜索建议

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

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

html相关:

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)
    }
  }

完整代码:

以上就是vue中百度地图定位及附近搜索功能使用步骤的详细内容，更多关于vue百度地图定位附近搜索的资料请关注脚本之家其它相关文章！