微信小程序根据用户当前位置并打开地图选择周边地址,完成外卖地址选择并计算距离

 1、主要运用到wx.getLocation和wx.chooseLocation,想要个性化或不需要地图,只显示周边可以使用腾讯地图官方文档提供的开放性接口,动态显示周边地址。

data: {
    my_latitude:"",
    my_longitude:"",
    chooseAddress:"",
  },
  //以当前位置为中心打开腾讯地图
  chooseAddressFn(){
    let that=this
    wx.chooseLocation({
      latitude: that.data.latitude,
      longitude: that.data.longitude,
      success(e){
        console.log(e)
        that.setData({
          chooseAddress:e.address+e.name, 具体详细信息需另外填写(门牌号等)
          my_latitude: e.latitude,
          my_longitude: e.longitude,
        });
      }
    })
  },
  //获取当前位置信息,获得lat,lng国测局坐标系
  getMyLocation(){
    wx.getLocation({
        type: 'gcj02',
        isHighAccuracy:true,//高精度
        success (res) {
          that.setData({
            my_latitude:res.latitude,
            my_longitude:res.longitude
          })
          const speed = res.speed
          const accuracy = res.accuracy
          qqmapsdk = new QQMapWX({
            key: '腾讯地图服务密钥'
          });
          //根据经纬度逆解析成地址
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res.latitude,
              longitude: res.longitude
            },
            success: function (res) {
              console.log(res);
              var add = res.result.address;
              that.setData({
                chooseAddress: add //具体详细信息需另外填写(门牌号等)
              })
            },
            fail: function (res) {
              console.log(res);
            },
          })
        }
     })
  }

2、根据输入关键词所呈现的周边地址信息,动态拉取并选择

<!--绑定输入事件-->
<input style="border:1px solid black;" bindinput="getsuggest" value="{{backfill}}"></input>
<!--关键词输入提示列表渲染-->
<view wx:for="{{suggestion}}" wx:key="index">
    <!--绑定回填事件-->
    <view>
    <!--根据需求渲染相应数据-->
    <!--渲染地址title-->
    <view style="text-align:center;" bindtap="backfill" id="{{index}}">{{item.title}}</view>
    <!--渲染详细地址-->
    <view style="font-size:12px;color:#666;text-align:center;">{{item.addr}}</view>
    </view>
</view>
// 引入SDK核心类
var QQMapWX = require('xxx/qqmap-wx.js');
 
// 实例化API核心类
var qqmapsdk = new QQMapWX({
    key: '开发密钥(key)' // 必填
});
 
//在Page({})中使用下列代码
//数据回填方法
backfill: function (e) {
    var id = e.currentTarget.id;
    for (var i = 0; i < this.data.suggestion.length;i++){
      if(i == id){
        this.setData({
          backfill: this.data.suggestion[i].title
        });
      }  
    }
  },
 
//触发关键词输入提示事件
getsuggest: function(e) {
    var _this = this;
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: e.detail.value, //用户输入的关键词,可设置固定值,如keyword:'KFC'
      //region:'北京', //设置城市名,限制关键词所示的地域范围,非必填参数
      success: function(res) {//搜索成功后的回调
        console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果,放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性,将关键词搜索结果以列表形式展示
          suggestion: sug
        });
      },
      fail: function(error) {
        console.error(error);
      },
      complete: function(res) {
        console.log(res);
      }
    });
}

3、距离计算,根据from的经纬度提供多种路线(步行、驾车)至to的距离,可做多家门店位置选择。

/**
   * 页面的初始数据
   */
  data: {
    addrList: [],//可从数据库通过api获取位置lat,lng列表
    distanceList: [] //获得每个地址到from位置的距离
  },
  //事件触发,调用接口
  calcDistanceFn(e){
    var _this = this, list=_this.data.addrList, latlng_list=[];
    for(var i in list){
      latlng_list.push({"latitude":list[i].lat, "longitude":list[i].lng});
    }
    console.log(latlng_list)
    qqmapsdk = new QQMapWX({
      key: '腾讯地图服务密钥'
    });
    //调用距离计算接口
    qqmapsdk.calculateDistance({
        mode: 'walking',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填
        //from参数不填默认当前地址
        //获取表单提交的经纬度并设置from和to参数(示例为string格式)
        //若起点有数据则采用起点坐标,若为空默认当前地址
        from: {
          latitude: xxx, 
          longitude: xxx
        }, //若起点有数据则采用起点坐标,若为空默认当前地址
        //收货人地址经纬度坐标,数据库从存储获得
        to: latlng_list, //终点坐标,可以为数组
        success: function(res) {//成功后的回调
          console.log(res);
          var res = res.result;
          var dis = [];
          for (var i = 0; i < res.elements.length; i++) {
            dis.push((res.elements[i].distance/1000).toFixed(2)); //将返回数据存入dis数组,显示单位km,默认为m
          }
          _this.setData({ //设置并更新distance数据
            distanceList: dis
          });
        },
        fail: function(error) {
          console.error(error);
        },
        complete: function(res) {
          console.log(res);
        }
    });
  },

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值