样品介绍
本文介绍如何使用组件映射和API中的MapContext wx.getLocation执行活动音轨播放。
最终效果：
实现过程
1、文件index.wxml代码如下，这一块比较简单，可自行查看分析；
<!--index.wxml--> <view class="container"> <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" polyline="{{polyline}}" enable-satellite="{{satellite}}" show-location style="width: 100%; height: 100vh;"></map> </view>2、文件index.js存放所有功能的逻辑代码，相对比较复杂，主要分析几个重点方法：
1）方法getDistance用于计算两个坐标点之间的距离，参数为两个坐标点的经纬度；
2）方法translateMarker使用translateMarker实现marker平移，为了实现多点之间连续平移，在内部嵌套方法translateMarker；
3）wx.getLocation用来获取当前的坐标点。
Tips：
points中的“+-”0.01等，无特别意义，可以自己任意修改；实际情况可调用接口获取轨迹数据；
duration = getDistance * 2中的2，无特别意义，可根据实际情况自行调整。
// 全屏地图路线图并动画移动 // polyline中的points可以获取json用来绘制轨迹图 // 获取应用实例 const app = getApp() Page({ data: { markers: [], // 标记点集合 polyline: [], // 坐标点集合 satellite: true, // 是否开启卫星图 i: 0 // 用于循环 }, onReady: function() { = wx.createMapContext('map'); // 创建 map 上下文 MapContext 对象 }, onLoad: function() { let that = this; // 获取当前坐标 wx.getLocation({ type: 'wgs84', success: (res) => { // 坐标集合 let points = [{ longitude: res.longitude, latitude: res.latitude }, { longitude: res.longitude + 0.01, latitude: res.latitude + 0.01 }, { longitude: res.longitude - 0.01, latitude: res.latitude + 0.02 }, { longitude: res.longitude - 0.01, latitude: res.latitude + 0.01 }, { longitude: res.longitude, latitude: res.latitude }]; // 标记点集合 let markers = points; markers.map((value, index) => { markers[index].id = index + 1; }); ({ polyline: [{ points: points, color: "#FF0000DD", width: 2 }], markers: markers, latitude: res.latitude, longitude: res.longitude }) (markers); } }) }, // 平移marker，带动画 translateMarker: function(markers) { let that = this; let markerId = markers[].id; let destination = { longitude: markers[ + 1].longitude, latitude: markers[ + 1].latitude }; let getDistance = (markers[].latitude, markers[].longitude, markers[ + 1].latitude, markers[ + 1].longitude); let duration = getDistance * 2; // 根据距离计算平移的速度，看起来保持匀速 .translateMarker({ markerId: markerId, destination: destination, autoRotate: true, rotate: 30, duration: duration, success(res) { ({ i: + 1 }); // 小于长度减1才执行 if ( < markers.length - 1) { (markers); } }, fail(err) { con('fail', err) } }) }, // 计算两坐标点之间的距离 getDistance: function(lat1, lng1, lat2, lng2) { let rad1 = lat1 * Ma / 180.0; let rad2 = lat2 * Ma / 180.0; let a = rad1 - rad2; let b = lng1 * Ma / 180.0 - lng2 * Ma / 180.0; let r = 6378137; return (r * 2 * Ma(a / 2), 2) + Ma(rad1) * Ma(rad2) * Ma(b / 2), 2)))).toFixed(0) } }) 1.《高德导航怎么记住路线？总结很全面速看!微信小程序实现活动轨迹回放》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。
2.《高德导航怎么记住路线？总结很全面速看!微信小程序实现活动轨迹回放》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址，https://www.lu-xu.com/gl/3291109.html