山东大学项目实训——地图圈系统——微信小程序（19）

最新推荐文章于 2023-07-06 16:40:29 发布
最新推荐文章于 2023-07-06 16:40:29 发布
阅读量394 收藏 9
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44181723/article/details/117455005
版权

地图圈系统——微信小程序（19）

一、查看轨迹及保存轨迹功能

在用户记录完轨迹之后可以查看自己的轨迹（即轨迹可以进行回放），如果觉得值得记录，则可以保存轨迹到后台。

界面会显示起点和终点，分别根据轨迹点数组的第一个元素和最后一个元素来获取的起点和终点。

轨迹是polyline来进行绘制。

保存轨迹需要上传用户名、用时、起点、终点、轨迹点数组。

二、项目代码

<!--pages/guiji_index/guiji_index.wxml-->


<navBar 
    title-text="查看轨迹" 
    back-icon="../../src/images/back@3x.png"
    background="#f2f2f2"
    bindback="back"/>

<view  class="aa">
  <!-- <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" markers="{{markers}}" polyline="{{polyline}}" show-location style="width: 100%; height: 100vh;">
  
  </map> -->
    <map id="map" class="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}"  class='mapView' polyline='{{polyline}}' show-location='{{true}}' subkey="YDYBZ-QBSRX-M4X4R-Z6JWA-YECKH-GQFCY">
<cover-view class="map-prompt" bindtap="moveMarker">开始回放</cover-view>
<cover-view class="map-prompt1" bindtap="save">保存轨迹</cover-view>
<cover-view class="time"> \n\n耗时：{{costtime}}</cover-view>
<!-- <cover-view class="start"> \n\n起点：{{start}}</cover-view>
<cover-view class="end"> \n\n终点：{{end}}</cover-view> -->
  </map>
</view>
<view class="box">
<view class="cu-bar bg-white">
    <view class="action sub-title">
      <text class="text-xl text-bold text-blue">起点：{{start}}</text>
      <text class="text-ABC text-blue">Start point</text>
      <!-- last-child选择器-->
    </view>
  </view>
  <view class="cu-bar bg-white">
    <view class="action sub-title">
      <text class="text-xl text-bold text-blue">终点：{{end}}</text>
      <text class="text-ABC text-blue">End point</text>
      <!-- last-child选择器-->
    </view>
  </view>
</view>
<!-- <view>
  <text>起点：{{start}}</text>
  <text>终点：{{end}}</text>
</view> -->


/* pages/guiji_index/guiji_index.wxss *//* pages/router_index/router_index.wxss */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";
.aa{
  margin-bottom: 50rpx;
}
.map{
  margin-top: 150rpx;
  
}
.map-prompt {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 150rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.map-prompt1 {
  width: 220rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  background: rgb(154, 155, 240);
  border-radius: 40rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 50rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.mapView {
  width: 100%;
  height: 1210rpx;
}

.btn {
  width: 40%;
  height: 50px;
  margin-top: 50rpx;
  margin-left:30%;
  margin-right:30%;
  border-radius: 10px;
  background-color: #4bc;
  line-height: 50px;
  text-align: center;
  color: white;
}
.time{
  background-color: #909399;
  font-size: 40rpx;
  padding-left: 90rpx;
  padding-top: 20rpx;
  color: #fff;
  border-radius: 40rpx;
  width: 50%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translate(-50%);
}
.start{
  background-color: #909399;
  font-size: 33rpx;
  padding-left: 90rpx;
  padding-top: 20rpx;
  color: #fff;
  border-radius: 40rpx;
  width: 90%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50rpx;
  left: 50%;
  transform: translate(-50%);
}
.end{
  background-color: #909399;
  font-size: 33rpx;
  padding-left: 90rpx;
  padding-top: 20rpx;
  color: #fff;
  border-radius: 40rpx;
  width: 90%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 150rpx;
  left: 50%;
  transform: translate(-50%);
}

// 全屏地图路线图并动画移动
// polyline中的points可以获取json用来绘制轨迹图
// 获取应用实例
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var util = require('../../utils/util.js');
var qqmapsdk;

import { request } from "../../requests/index.js";
import {
  CDN_PATH,
  PLUGIN_KEY
} from '../../config/appConfig';
var btnEnable = true

Page({
  data: {
    id:'',
    start:'',
    end:'',
    username:'',
    costtime:'',
    CDN_PATH,
    point:[],
    markers: [], // 标记点集合
    polyline: [], // 坐标点集合
    satellite: true, // 是否开启卫星图
    // i: 0 // 用于循环
  },
  // onReady: function () {
  //   this.mapCtx = wx.createMapContext('map'); // 创建 map 上下文 MapContext 对象
  // },
  onReady: function () {
    this.mapCtx = wx.createMapContext('map', this)
  },
  onLoad:  function (options) {

    console.log(options)
    // var id=options.id
    let that = this

    that.setData({
      costtime:options.costtime,
      username:options.username,
      point:JSON.parse(options.point)
    })
    var value = wx.getStorageSync('firstuser')
    console.log(value)
    
    // var result = await request({ url:'http://8.140.176.167:8800/router/findbyid/'+id });
    // console.log(result)
        let testPoints = JSON.parse(options.point)
        qqmapsdk = new QQMapWX({
          key: 'LE2BZ-ZIPKU-AWCVW-4EGZV-YAMY2-36BS4' // 必填
        });
            //2、根据坐标获取当前位置名称，显示在顶部:腾讯地图逆地址解析
            qqmapsdk.reverseGeocoder({
              location: {
                latitude: testPoints[testPoints.length-1].latitude,
                longitude: testPoints[testPoints.length-1].longitude
              },
              success: function (addressRes) {
                var address = addressRes.result.formatted_addresses.recommend;
                console.log(address)
                
                  that.setData({
                    end:address
                })
                
                
               
              }
            })

            qqmapsdk.reverseGeocoder({
              location: {
                latitude: testPoints[0].latitude,
                longitude: testPoints[0].longitude
              },
              success: function (addressRes) {
                var address = addressRes.result.formatted_addresses.recommend;
                console.log(address)
                
                  that.setData({
                    start:address
                })
                
                
               
              }
            })


    var markers = []
    var a = {
      iconPath: value.avatarUrl,
      id: 20,
      latitude: testPoints[0].latitude,
      longitude: testPoints[0].longitude,
      width: 30,
      height: 30,
      i:'',
    }
    markers.push(a)
    this.setData({
      markers,
    
    })
    let newPolyline = ({
      points: testPoints,
      color: '#5085E7',
      width: 5,
      dottedLine: false
    })
    this.setData({
      polyline: [newPolyline]
    })
    // var that = this
    setTimeout(function () {
      that.mapCtx.includePoints({
        padding: [50, 50, 50, 50],
        points: testPoints
      })

    }, 200)

  
  
        
  },


  /**测试点坐标运动 */
  moveMarker: function () {
    if (!btnEnable) {
      return
    }

    var points = this.data.polyline[0].points
    console.log(points)
    this.loopAnamation(points,0,20)

    btnEnable = false
  },

  /**
   *  创建循环动画
   */
  loopAnamation(subArray,index, markerId) {

    var that = this
    console.log(subArray)
    console.log(index)
    console.log(markerId)
    if (index >= subArray.length) {
      btnEnable = true
      return
    }
    console.log('开始移动第', index, '个点', 'markerId：', markerId, subArray)
    that.mapCtx.translateMarker({
      markerId: 20,
      autoRotate: false,
      duration: 15000 / (subArray.length - 1),
      destination: {
        latitude: subArray[index].latitude,
        longitude: subArray[index].longitude,
      },
      animationEnd() {
        console.log('animation end')
        that.loopAnamation(subArray, index + 1, markerId)
      },
      fail: function (e) {
        console.log("来了老弟");
        console.log(e);
      }
    })
  },
    onHide: function () {
      clearInterval(this.data.i)
  },
    onUnload: function () {
      clearInterval(this.data.i)
  },
  save(){
    var that = this
    var a = {
      username:this.data.username,
      use_time:this.data.costtime,
      startpoint:this.data.start,
      // startpoint:"历城区伯乐路",
      endpoint:this.data.end,
      // endpoint:"历城区舜泰北路",
      router:JSON.stringify(this.data.point)

    }
    wx.request({
      url: 'http://8.140.176.167:8800/router/addRouter',
      method:'POST',
      data:a,
      success:function(res){
      wx.showToast({
              title: "保存成功",
              duration: 1000,
              icon: "sucess",
              make: true
            });
            var i = setInterval(function() { //当前页面


              wx.navigateBack({
               delta: 1,
             })
            },1000)
            that.setData({
              i:i
            })
     
      }

    })
  }
 
})

三、效果展示

在这里插入图片描述

在这里插入图片描述

SDUer～
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
腾讯地图 根据两点间的坐标算出路线
weixin_42027503的博客
11-12 2067
1.先去腾讯地图申请key，传送门 2.下载微信小程序JavaScriptSDK， 3.在小程序引入， 在上一页面取得两地的经纬度， 小程序代码 wxml <map id="myMap" style="width: 100%; height: 1500rpx;" longitude="{{longitude}}" latitude="{{latitude}}" scale='{{scale...
微信小程序 map polyline 连点成线 线路规划 demo
终日而思不如须臾所学。
01-21 1万+
微信小程序官方文档 学校部分快递点（中通，百世…）位于校外，所以找寻比较困难 微信小程序+定位解决这个问题特别合适 // map.wxml <map id="mapp" latitude="37.488" longitude="121.4499" scale="16" show-compass="true"show-scale="true" polyline="{{polyli...
微信小程序实现轨迹回放的示例代码
10-15
主要介绍了微信小程序实现轨迹回放的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序绘制地图轨迹线路
u014388322的专栏
12-07 5798
绘制轨迹的话需要拿到坐标点，获取到坐标点之后再地图上进行绘制就可以；布局文件：js文件：在实现轨迹绘制的时候需要的数据1：起点的坐标数据和icon2：终点的坐标数据和icon3：绘制线路的坐标数据集合实现代码：
uniapp 微信小程序实现运动轨迹、行车轨迹、历史轨迹、轨迹回放、不同速度有不同的路线颜色
热门推荐
Yarnk的博客
04-21 1万+
先看效果 （欢迎扫码体验） 实现效果： 根据不同速度绘制不同颜色的轨迹 根据终点起点获取地图中心点，尽可能在屏幕内完全展示轨迹 获取最快的路段并显示 自定义点图标 实现步骤： map组件 view标签部分 <template> <view> <map id="map1" :longitude="longitude" :latitude="latitude" :markers="markers" :scale="scale" :poly
微信小程序地图导航功能实现完整源代码附效果图（推荐）
10-17
主要介绍了微信小程序地图导航功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序项目实例——今日美食
05-24
【微信小程序项目实例——今日美食】是一个以移动开发技术为核心，专注于美食分享的应用。这个小程序旨在为用户带来丰富的美食制作教程，提供详细的食材配料和步骤指导，让用户在家中也能轻松制作出美味佳肴。 首先...
微信小程序项目实例——家居团购
06-04
微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例...
微信小程序项目实例——体质计算器
05-27
在这个“微信小程序项目实例——体质计算器”中，开发者构建了一个专注于健康领域的应用，帮助用户计算体质指数（BMI），评估其健康状况，并提供相关健康建议。 体质计算器的核心功能是根据用户的身高和体重计算BMI...
微信小程序项目实例——备忘录
05-24
总结，这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点，为学习微信小程序开发提供了实用的示例。通过实践这样的项目，开发者可以深入理解微信小...
微信小程序项目实例——幸运大转盘
05-24
在本项目实例中，我们探讨的是“微信小程序项目——幸运大转盘”，这是一个适用于移动开发领域的轻量级应用，尤其适合微信平台的用户互动。微信小程序作为腾讯公司推出的一种新型应用形态，它无需安装即可使用，具有...
微信小程序画布绘制并保存图片
梁雨季™的博客
01-04 1153
微信小程序画布绘制 生成上下文 ctx = wx.createCanvasContext('canvasID'); 对应的节点信息 <canvas canvas-id="canvasID" class="canvas-one" style="width:{{width}}px;height:{{height}}px"> </canvas> 获取对应的手机屏幕的大小 wx.getSystemInfo({ success: res => { rp
微信小程序polyline
flyestcoder的博客
11-06 5360
微信小程序polyline踩坑 最近在做微信小程序项目，有个需求为实现轨迹路线。官方文档一看，嗯，要用polyline，马上写个demo，很简单嘛，代码如下：` // 初始数据 data: { polyline: [{ points: [{ latitude: "31.79453053831718", longitude: "120.02379165275012" }, { latitude: "31.7920170
微信小程序绘制线路以及marker轨迹移动
u014388322的专栏
07-06 2414
1：首先需要给绘制的线路设置坐标数据信息。2：对起点和终点设置两个marker。4：设置线路与地图边距的距离代码。3：设置小车轨迹的移动。
微信小程序中地图--行走轨迹
zhang_zan
02-05 1万+
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" bindcontroltap="controltap" bindmarkertap="markertap" markers="{{markers}}" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 1...
微信小程序实现活动轨迹回放
King博客
04-10 1万+
前言 本文介绍使用组件map和API的MapContext+wx.getLocation来实现活动轨迹回放。 最终效果： 实现过程 1. 文件index.wxml代码如下，这一块比较简单，可自行查看，不做过多分析： <!--index.wxml--> <view class="container"> <map id="map" longitude=...
微信小程序实现轨迹回放
weixin_30920597的博客
05-15 4804
在微信小程序实现轨迹回放的效果 1、wxml <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="16" bindcontroltap="controltap" bindmarkertap="markertap" markers="{{markers}}" polyline="{{pol...
【创新未发表】Matlab实现白冠鸡优化算法COOT-Kmean-Transformer-LSTM负荷预测算法研究.rar
最新发布
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
微信小程序驱动的实训室门禁系统设计与实现
"《基于微信小程序的实训室门禁系统的设计与实现》是一篇针对西南财经大学本科和专科学生的毕业论文，专注于探讨微信小程序在实训室门禁管理中的创新应用。论文以微信小程序为研究主体，旨在提升传统门禁系统的效率...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值