案例二---移动轨迹---实时和静态 迷南。 2022-10-25 01:18 36阅读 0赞 > 移动轨迹 地图标出移动轨迹 > 位置详细接入说明 [https://blog.csdn.net/qq\_42027681/article/details/113405971][https_blog.csdn.net_qq_42027681_article_details_113405971] > 如果打不开可能还在审核 > ![在这里插入图片描述][20210130140559286.jpg] ### 移动轨迹 ### * 说明 * 静态 * * 动态 # 说明 # > 静态就是获取移动的点位数组 画图 > 动态实时获取位置 可以压缩点位进行绘制 这里不压缩 > 压缩移步 腾讯位置服务 路径规划 [https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection][https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_methodDirection] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1] # 静态 # <template> <view> <map id="myMap" style="width: 100%; height: 100vh" :markers="markers" :longitude="fromP.longitude" :latitude="fromP.latitude" scale='18' :polyline="polyline" show-location> </map> </view> </template> <script> export default { data() { return { fromP: { longitude: 115.101399, latitude: 33.415668 }, endP: { longitude: 115.101399, latitude: 33.415668 }, polyline: [], markers: [] } }, onLoad() { this.test() }, methods: { test() { let vm = this; //模拟实时获取位置 let ports = [{ latitude: 33.415668, longitude: 115.101399 }, { latitude: 33.415834, longitude: 115.101603 }, { latitude: 33.415811, longitude: 115.101877 }, { latitude: 33.415905, longitude: 115.102370 }, { latitude: 33.416389, longitude: 115.101802 }, { latitude: 33.416232, longitude: 115.101603 }, { latitude: 33.416196, longitude: 115.101448 }, { latitude: 33.416192, longitude: 115.101383 }, { latitude: 33.416277, longitude: 115.101265 }, { latitude: 33.416026, longitude: 115.101115 }, { latitude: 33.415941, longitude: 115.100804 }]; let lasts = ports.length; let startS = ports[0] let endD = ports[lasts - 1] vm.endP = endD let mks = [] console.log(ports) mks.push({ title: "起点", id: 1, latitude: startS.latitude, longitude: startS.longitude, callout: { content: "这里是起点", borderColor: 'blue' }, label: { content: "起点" }, //地图显示内容 iconPath: "../../../static/startP.png" }, { title: "终点", id: 2, latitude: endD.latitude, longitude: endD.longitude, callout: { content: "这里是终点", borderColor: 'blue' }, label: { content: "终点" }, //地图显示内容 iconPath: "../../../static/endP.png" }) vm.markers = mks; let colors = []; function getRandomColor() { let colors = [] for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color colors.push(color) } return '#' + colors.join('') } for (let j = 0; j < ports.length; j++) { let stro = getRandomColor() colors.push(stro) } let colorLists = colors console.log(colorLists) // Math.floor(Math.random()*10); // var ranNum = Math.ceil(Math.random() * 25); vm.polyline = [{ points: ports, // color: '#FF0000DD', //这里可以随机生成 colorList: colors, // ['#ffff00','#0f1bff','#ffc859','#ff1770','#ff0000','#e28aff','#00aa00','#55ff7f','#0651ff','#000000',] arrowLine: true, width: 5, borderColor: "#ffff00" }] } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } </style> ## 动态 ## <template> <view> <view class="content"><button :type="types" @click="test()">{ { stText}}</button>当前速度:{ { speed}}</view> <map id="myMap" style="width: 100%; height: 90vh" :markers="markers" :longitude="fromP.longitude" :latitude="fromP.latitude" scale='18' :polyline="polyline" show-location> </map> </view> </template> <script> export default { data() { return { polyline: [{ points: [], color: '#FF0000DD', width: 5 }], speed: 0, fromP: { latitude: 0, longitude: 0 }, markers: [], isD: false, stText: "开始运动", types: "primary", timer: "" } }, onLoad() { let vm = this; uni.getLocation({ type: 'gcj02', success: res => { console.log(res) vm.fromP.latitude = res.latitude; vm.fromP.longitude = res.longitude; } }) }, methods: { test() { let vm = this; if (vm.isD) { vm.isD = !vm.isD; vm.stText = "开始运动" vm.types = "primary" clearInterval(vm.timer) vm.speed = 0 } else { vm.isD = !vm.isD; vm.stText = "暂停" vm.types = "warn" vm.timer = setInterval(function() { uni.getLocation({ type: 'gcj02', success: res => { vm.speed = res.speed vm.polyline[0].points.push({ latitude: res.latitude, longitude: res.longitude }) let portss = vm.polyline[0].points let mks = []; mks.push({ title: "起点", id: 1, latitude: portss[0].latitude, longitude: portss[0].longitude, callout: { content: "这里是起点", borderColor: 'blue' }, label: { content: "起点" }, //地图显示内容 iconPath: "../../../static/startP.png" }, { title: "目前", id: 2, latitude: portss[portss.length - 1].latitude, longitude: portss[portss.length - 1].longitude, callout: { content: "这里是终点", borderColor: 'blue' }, label: { content: "目前" }, //地图显示内容 iconPath: "../../../static/logos.png" }) vm.markers = mks; } }) }, 200) } } } } </script> <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } </style> [https_blog.csdn.net_qq_42027681_article_details_113405971]: https://blog.csdn.net/qq_42027681/article/details/113405971 [20210130140559286.jpg]: /images/20221024/730280c729b94d19a8b2644b4a8b66f9.png [https_lbs.qq.com_miniProgram_jsSdk_jsSdkGuide_methodDirection]: https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodDirection [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221024/16ef80d0c4fb435ea7517abed90d4132.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221024/0ed8963ed0124af3ab3e15fc03bff38b.png
相关 leaflet轨迹移动,有开始和暂停功能(示例代码030) ![在这里插入图片描述][804c6d40d4d24c23bc0d621973afeef0.png_pic_center] 第030个 [点击查看专栏目录][Link 1] 迷南。/ 2024年04月01日 19:04/ 0 赞/ 44 阅读
相关 Flink:实时ETL案例 抽取(extract)、转换(transform)、加载(load) 需求 将国家编号变成地区编号(在跨国业务常用) 形式 数据源 \{"dt":"2020- 男娘i/ 2024年03月23日 13:00/ 0 赞/ 16 阅读
相关 案例:按钮拖动移动 效果图: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV 刺骨的言语ヽ痛彻心扉/ 2023年07月07日 03:47/ 0 赞/ 56 阅读
相关 高德地图实时轨迹播放或 历史轨迹查看demo <!doctype html> <html> <head> <meta charset="utf-8"> <meta h 淩亂°似流年/ 2022年11月30日 04:29/ 0 赞/ 184 阅读
相关 案例二---移动轨迹---实时和静态 > 移动轨迹 地图标出移动轨迹 > 位置详细接入说明 [https://blog.csdn.net/qq\_42027681/article/details/1134059 迷南。/ 2022年10月25日 01:18/ 0 赞/ 37 阅读
相关 关于地图中轨迹的平滑移动的实现 很多人应该都有类似的经历,叫完车,想看看车离我还有多远距离?但手机屏幕上的车不是一动不动,就是一跳一跳的漂移。 目前市面上大多产品“轨迹平滑移动”做的并不好。 市面上只有快 太过爱你忘了你带给我的痛/ 2022年07月15日 12:56/ 0 赞/ 192 阅读
相关 按键精灵脚本笔记 鼠标按直线轨迹移动 Function lineMove(targetX, targetY) //获取当前鼠标的坐标 GetCursorPos x, y 小灰灰/ 2022年06月07日 13:16/ 0 赞/ 803 阅读
相关 H5动画:轨迹移动 在 Web 开发中,经常需要实现各种动画效果,例如:移动、变形、透明度变化等,今天我们主要来讨论各种移动的实现。 直线移动 ![straight-line][] 通常 小咪咪/ 2022年05月20日 01:10/ 0 赞/ 326 阅读
相关 【高德地图SDK】如何实现轨迹平滑移动? 很多人应该都有类似的经历,叫完车,想看看车离我还有多远距离?但手机屏幕上的车不是一动不动,就是一跳一跳的漂移。 目前市面上大多产品“轨迹平滑移动”做的并不好。 市面上只有快 本是古典 何须时尚/ 2022年01月09日 05:45/ 0 赞/ 562 阅读
还没有评论,来说两句吧...