鲁达 示例简介
本文主要介绍项目中常用的一些功能，供大家参考：
1、小程序跳转到其它小程序，并传参和获取参数数据；
2、计算定位位置和目标位置的距离；
3、地图上标记所有位置，并实现点击跳转到导航系统页面。
Tips：为了演示的方便，代码都会尽量缩减，样式随意。
实现过程
一、小程序跳转到其它小程序，并传参和获取参数数据
1、wxml代码如下：
<button catchtap="goMiniProgram" class="button-style">跳转小程序</button>2、跳转小程序的js代码如下：
appId：要打开的小程序 appId；
path：打开的页面路径，如果为空则打开首页；
extraData：需要传递给目标小程序的数据，目标小程序可在A、A中获取到这份数据（本文介绍的是在A获取）；
envVersion：要打开的小程序版本（本文使用'develop'）。
// 跳转小程序 goMiniProgram: function () { wx.navigateToMiniProgram({ appId: '要打开的小程序 appId', path: 'pages/index/index', extraData: { from: 'miniProgram', appName: '程序名', responseType: 'code' }, envVersion: 'develop', success(res) { con(res) } }) }3、目标小程序获取传参的数据：
// a使用下面写法获取extraData的数据 onShow: function(options) { con(options) if ) { = o; } }二、计算定位位置和目标位置的距离
1、aon增加代码，用于授权定位的提示信息（点击“确定”）：
"permission": { ";: { "desc": "你的位置信息将用于小程序位置接口的效果展示" } } 2、wxml代码如下：
<text>跟目标地址距离为：{{distance}}</text>3、计算距离的js代码如下：
1）计算距离函数，单位km；
// 计算距离函数（单位km） Rad(d) { //根据经纬度判断距离 return d * Ma / 180.0; }, getDistance(lat1, lng1, lat2, lng2) { // lat1用户的纬度 // lng1用户的经度 // lat2目标的纬度 // lng2目标的经度 var radLat1 = (lat1); var radLat2 = (lat2); var a = radLat1 - radLat2; var b = (lng1) - (lng2); var s = 2 * Ma(a / 2), 2) + Ma(radLat1) * Ma(radLat2) * Ma(b / 2), 2))); s = s * 6378.137; // 6378.137为地球半径 s = Ma(s * 10000) / 10000; s = s.toFixed(2) + 'km'; // 保留两位小数 return s; } })2）页面加载时，获取定位坐标并计算距离（latitude2和longitude2为设置的目标坐标）；
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 获取当前位置 wx.getLocation({ type: 'gcj02', // altitude: true, // 较高精确度 success: (res) => { con('当前位置：', res); // 113.418123,22.505415 let distance = , res.longitude, , ); ({ 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: '../../image;, width: '40', height: '40', }, { id: 1, latitude: 22.489619, longitude: 113.391488, iconPath: '../../image;, width: '40', height: '40', }, { id: 2, latitude: 22.523008, longitude: 113.369713, iconPath: '../../image;, width: '40', height: '40', }, { id: 3, latitude: 22.494695, longitude: 113.452789, iconPath: '../../image;, width: '40', height: '40', }, { id: 4, latitude: 22.535693, longitude: 113.379631, iconPath: '../../image;, width: '40', height: '40', }, { id: 5, latitude: 22.506448, longitude: 113.418437, iconPath: '../../image;, 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 = , mapHeight = ; ({ mapWidth: mapWidth, mapHeight: mapHeight }) } 3）点击标记点，跳转到导航系统；
// 点击标记点 openOmnirange: function (e) { let id = e.markerId; wx.openLocation({ latitude: [id].latitude, longitude: [id].longitude, name: [id].name, address: [id].address }) }