示例简介

本文主要介绍项目中常用的一些功能，供大家参考：

1、小程序跳转到其它小程序，并传参和获取参数数据；

2、计算定位位置和目标位置的距离；

3、地图上标记所有位置，并实现点击跳转到导航系统页面。

Tips：为了演示的方便，代码都会尽量缩减，样式随意。

实现过程

一、小程序跳转到其它小程序，并传参和获取参数数据

1、wxml代码如下：

<button catchtap="goMiniProgram" class="button-style">跳转小程序</button>

2、跳转小程序的js代码如下：

appId：要打开的小程序 appId；

path：打开的页面路径，如果为空则打开首页；

extraData：需要传递给目标小程序的数据，目标小程序可在App.onLaunch、App.onShow中获取到这份数据（本文介绍的是在App.onShow获取）；

envVersion：要打开的小程序版本（本文使用'develop'）。

// 跳转小程序  goMiniProgram: function () {    wx.navigateToMiniProgram({      appId: '要打开的小程序 appId',      path: 'pages/index/index',      extraData: {        from: 'miniProgram',        appName: '程序名',        responseType: 'code'      },      envVersion: 'develop',      success(res) {        console.log(res)      }    })  }

3、目标小程序获取传参的数据：

// app.js使用下面写法获取extraData的数据  onShow: function(options) {    console.log(options)    if (options.referrerInfo.extraData) {      this.globalData.extraData = options.referrerInfo.extraData;    }      }

二、计算定位位置和目标位置的距离

1、app.json增加代码，用于授权定位的提示信息（点击“确定”）：

"permission": {    "scope.userLocation": {      "desc": "你的位置信息将用于小程序位置接口的效果展示"    }  }

2、wxml代码如下：

<text>跟目标地址距离为：{{distance}}</text>

3、计算距离的js代码如下：

1）计算距离函数，单位km；

  // 计算距离函数（单位km）  Rad(d) {    //根据经纬度判断距离    return d * Math.PI / 180.0;  },  getDistance(lat1, lng1, lat2, lng2) {    // lat1用户的纬度    // lng1用户的经度    // lat2目标的纬度    // lng2目标的经度    var radLat1 = this.Rad(lat1);    var radLat2 = this.Rad(lat2);    var a = radLat1 - radLat2;    var b = this.Rad(lng1) - this.Rad(lng2);    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; // 6378.137为地球半径    s = Math.round(s * 10000) / 10000;    s = s.toFixed(2) + 'km'; // 保留两位小数    return s;  }})

2）页面加载时，获取定位坐标并计算距离（latitude2和longitude2为设置的目标坐标）；

  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    // 获取当前位置    wx.getLocation({      type: 'gcj02',      // altitude: true, // 较高精确度      success: (res) => {        console.log('当前位置：', res);        // 113.418123,22.505415        let distance = this.getDistance(res.latitude, res.longitude, this.data.latitude2, this.data.longitude2);        this.setData({          distance: distance        });      }    })  }

三、地图上标记所有位置，并实现点击跳转到导航系统页面

1、wxml代码如下（宽高单位使用px，如用rpx在ipone5屏幕下会导致显示不完全）：

<map id="myMap" style="width: {{mapWidth}}px; height: {{mapHeight}}px;" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" show-location bindmarkertap="selectMarket" include-points="{{markers}}" bindmarkertap="openOmnirange"></map>

2、js代码如下：

1）data数据设置；

  /**   * 页面的初始数据   */  data: {    latitude: 22.495393,    longitude: 113.376004,    markers: [{        id: 0,        latitude: 22.502508,        longitude: 113.39271,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },      {        id: 1,        latitude: 22.489619,        longitude: 113.391488,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },      {        id: 2,        latitude: 22.523008,        longitude: 113.369713,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },      {        id: 3,        latitude: 22.494695,        longitude: 113.452789,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },      {        id: 4,        latitude: 22.535693,        longitude: 113.379631,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },      {        id: 5,        latitude: 22.506448,        longitude: 113.418437,        iconPath: '../../images/mark_icon.png',        width: '40',        height: '40',      },    ],    addressMes: [{        name: '孙文纪念公园',        address: '中山市兴中道'      },      {        name: '金钟湖公园',        address: '中山市新安路南'      },      {        name: '岐江公园',        address: '中山一路与西堤路交叉口'      },      {        name: '长江水世界',        address: '火炬高技术开发区景观路1号'      },      {        name: '逸仙湖公园',        address: '广东省中山市湖滨路'      },      {        name: '中环广场',        address: '广东省中山市兴政路1号'      },    ],    mapWidth: '',    mapHeight: ''  }

2）页面加载时，计算手机屏幕宽高，并赋值给地图；

  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    let sy = wx.getSystemInfoSync(),      mapWidth = sy.windowWidth,      mapHeight = sy.windowHeight;    this.setData({      mapWidth: mapWidth,      mapHeight: mapHeight    })  }

3）点击标记点，跳转到导航系统；

  // 点击标记点  openOmnirange: function (e) {    let id = e.markerId;    wx.openLocation({      latitude: this.data.markers[id].latitude,      longitude: this.data.markers[id].longitude,      name: this.data.addressMes[id].name,      address: this.data.addressMes[id].address    })  }