微信小程序 --- 获取当前地点和目的地距离 && 获取目的地的高德地图显示 && 点击按钮进行导航

微信小程序 — 获取当前地点和目的地距离 && 获取目的地的高德地图显示 && 点击按钮进行导航

xml:

<view class="map_container">
  <map class="map" id="map" longitude="{{detInfo.gisx}}" latitude="{{detInfo.gisy}}" scale="16" markers="{{markers}}"></map>  
</view>

js:

var amapFile = require('../../utils/amap-wx.130.js'); //引入高德js

// 计算两地之间的距离
function juli(lat1, lng1, lat2, lng2) {
  console.log(lat1, lng1, lat2, lng2)
  var radLat1 = lat1 * Math.PI / 180.0;
  var radLat2 = lat2 * Math.PI / 180.0;
  var a = radLat1 - radLat2;
  var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
  var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  s = s * 6378.137;
  s = Math.round(s * 10000) / 10000;
  return s
}

onLoad: function () {
    this.getDetinfo();
    this.getLocation();
},

//  获取目的地详细信息 经纬度
  getDetinfo() {
    let that = this;
    HTTP.Config.Request('info/surplus_space', 'POST', {})
      .then(function (i) {
        that.setData({
          detInfo: i.data
        })
        that.getMylocation();//获取当前位置经纬度
      }, function (error) {
        console.log(error);
      })
  },

  // 获取当前位置经纬度
  getMylocation() {
    let that = this;
    let v = this.data;
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        console.log(res)
        let kms= juli(res.latitude,res.longitude,v.detInfo.gisy,v.detInfo.gisx).toFixed(1);
        that.setData({
         kms:kms
        })
      }
    })
  },

// 获取目的地的高德地图显示
  getLocation() {
    var that = this;
    var key = HTTP.Config.key;

    var myAmapFun = new amapFile.AMapWX({
      key: key
    });
    myAmapFun.getRegeo({
      iconPath: "../../images/marker.png",
      iconWidth: 30,
      iconHeight: 30,
      success: function (data) {
        console.log('ddddddd', data);
        var marker = [{
          id: data[0].id,
          latitude: data[0].latitude,
          longitude: data[0].longitude,
          iconPath: data[0].iconPath,
          width: data[0].width,
          height: data[0].height
        }]
        that.setData({
          markers: marker
        });
        that.setData({
          latitude: data[0].latitude
        });
        that.setData({
          longitude: data[0].longitude
        });
        that.setData({
          textData: {
            name: data[0].name,
            desc: data[0].desc
          }
        })
      },
      fail: function (info) {
        // wx.showModal({title:info.errMsg})
      }
    })
  },

  // 点击进行导航
  locationBtn() {
    let detInfo = this.data.detInfo;
    wx.openLocation({
      latitude: detInfo.gisy, // 纬度，范围为-90~90，负数表示南纬
      longitude: detInfo.gisx, // 经度，范围为-180~180，负数表示西经
      scale: 16, // 缩放比例
      name: detInfo.parkingName,
      address: detInfo.parkingAddress,
      success: function (r) {
        console.log(r)
      }
    })
  },