微信小程序 循迹功能制作
2024-06-11 20:03:52
规划地图的路径，实时获取用户当前的定位，进行路线循迹导航功能的开发：
效果图：
实现代码：
<map id="map" enable-satellite longitude="{{longitude1}}" latitude="{{latitude1}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 348px;"></map><view class="title">路线：{{title}}</view>
<view style="margin-top: 20rpx;"></view><button type='primary' catchtap="start_dian">路线起点开始循迹</button>
<button type='primary' catchtap="end_dian">路线终点开始循迹</button>
<button type='primary' catchtap="dom">下载</button>var that;
const app = getApp()
const util = require("../../utils/util.js")
const txt = require("../../utils/txt.js")
// const txt = require("../../utils/gcoord.js")
import gcoord from '../../utils/gcoord.js'
var polyline_points = [];
var x_PI = 3.14159265358979324 * 3000.0 / 180.0;var PI = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;
Page({data: {pageShow:false,scale:10,obj: {},longitude: 116.34665554470486,latitude: 39.9463560655382,in_val: '',showModalStatus: false,key: 'sadsad',markers: [{iconPath: "/img/map.png",id: 0,longitude: 116.34903966083392,latitude: 39.94907287783573,width: 30,height: 30}, {iconPath: "/img/map.png",id: 0,longitude: 116.3431299221213,latitude: 39.94493766291209,width: 30,height: 30}, {iconPath: "/img/map.png",id: 0,longitude: 116.34090281579688,latitude: 39.946849743723874,width: 30,height: 30}],polyline: [{points: [],color: "#3F51B5",width: 5,}],},dom(){wx.navigateTo({url: '../myList/myList',})},// 设置地图路线setMapXian() {var kmlLines = this.data.obj.kmlLines.points;kmlLines.forEach((item, idx) => {// if (idx <= 1000) {this.setMapItemPoints(item.longitude, item.latitude, idx)// }})},// 设置路线setMapItemPoints(longitude, latitude, idx) {var result = gcoord.transform([longitude, latitude], // 经纬度坐标gcoord.WGS84, // 当前坐标系（百度）gcoord.GCJ02); console.log('result', result)var points = {longitude: result[0],latitude: result[1]}polyline_points.push(points)// console.log('设置路线', polyline_points, longitude, latitude)// 设置地图标记点if (idx == this.data.obj.kmlLines.points.length-1) {// 终点坐标this.setMapItemMarkers(result[0], result[1])this.setData({['polyline[0].points']: polyline_points,zhongdian_longitude: result[0],zhongdian_latitude: result[1]})} else if (idx ==0){// 起点坐标this.setMapItemMarkers(result[0], result[1])this.setData({qidian_longitude: result[0],qidian_latitude: result[1]})}},// 从路线起点开始循迹start_dian() {var longitude1 = this.data.qidian_longitudevar latitude1 = this.data.qidian_latitudethis.setData({scale: 15,longitude1: longitude1,latitude1: latitude1,})},// 从路线终点开始循迹end_dian() {var longitude1 = this.data.zhongdian_longitudevar latitude1 = this.data.zhongdian_latitudethis.setData({scale: 15,longitude1: longitude1,latitude1: latitude1,})},// 点击当前位置now_loction() {var that=this;wx.getLocation({type: 'wgs84',success(res) {const latitude = res.latitudeconst longitude = res.longitudethat.setData({longitude1: longitude,latitude1: latitude,})}})},// 导航daohang(daohang_latitude, daohang_longitude) {console.log(daohang_latitude, daohang_longitude)wx.openLocation({latitude: daohang_latitude,longitude: daohang_longitude,scale: 10})},// 导航到起点navigation_start_ll() {var trackPoints = this.data.obj.trackPointsvar start_latitude = trackPoints[0].points.latitudevar start_longitude = trackPoints[0].points.altitudethis.daohang(start_latitude, start_longitude);},// 导航到终点navigation_end_ll() {var trackPoints = this.data.obj.trackPointsvar end_latitude = trackPoints[1].points.latitudevar end_longitude = trackPoints[1].points.altitudethis.daohang(end_latitude, end_longitude);},onLoad(options) {var obj = {};console.log('txt:', txt)options.title = "洗马林长城导航轨迹";txt.forEach(item => {if (item.title == options.title) {console.log('1111111111111111')obj = item} else {console.log('22222222222222222', item.title, options, options.title)}})console.log('obj:', obj)this.setData({title: options.title,obj})var trackPoints = this.data.obj.trackPointsvar start_latitude = trackPoints[0].points.latitudevar start_longitude = trackPoints[0].points.altitudeconsole.log('11111111',trackPoints,start_latitude, start_longitude)this.setData({latitude1: start_latitude,longitude1: start_longitude})this.setMapXian()},// 设置起点终点坐标setMapItemMarkers(longitude, latitude) {var obj_item = {iconPath: "/img/map.png",id: 0,longitude: longitude,latitude: latitude,width: 30,height: 30};var markers = this.data.markers;markers.push(obj_item);this.setData({markers})return obj_item;},// 设置地图绿色的点map_ll(nowTime) {const _locationChangeFn = res => {console.log('location change', res.latitude, res.longitude)if (nowTime) {nowTime = falsethis.setData({latitude1: res.latitude,longitude1: res.longitude})}}wx.onLocationChange(_locationChangeFn);},onShow() {this.getUserLocation();},markertap(e) {console.log(e.markerId)this.showModal(e.markerId)},controltap(e) {console.log(e.controlId)},getUserLocation() {wx.getSetting({success(res) {console.log(res)if (res.authSetting['scope.userLocationBackground']) {wx.startLocationUpdateBackground({success: (res) => {console.log('startLocationUpdate-res', res)},fail: (err) => {console.log('startLocationUpdate-err', err)}})} else {if (res.authSetting['scope.userLocation'] == false) {console.log('打开设置页面去授权')} else {wx.startLocationUpdateBackground({success: (res) => {console.log('startLocationUpdate-res', res)},fail: (err) => {console.log('startLocationUpdate-err', err)}})}}}})},//显示对话框showModal: function(idx) {//console.log(event.markerId);var myall = {longitude: this.data.list[idx].longitude,latitude: this.data.list[idx].latitude,tel: this.data.list[idx].linktel,name: this.data.list[idx].name,introduce: this.data.list[idx].introduce,linkName: this.data.list[idx].linkName,time: util.js_date_time(new Date().getTime() / 1000),id: idx,}this.setData({myall})var that = this;// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),showModalStatus: true})setTimeout(function() {animation.translateY(0).step()this.setData({animationData: animation.export()})}.bind(this), 200)},//隐藏对话框hideModal: function() {// 隐藏遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function() {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)},calling: function(event) {var tel = this.data.myall.tel;wx.makePhoneCall({phoneNumber: tel,success: function() {console.log("拨打电话成功！")},fail: function() {console.log("拨打电话失败！")}})},nav_register() {wx.navigateTo({url: '../register/register',})},regionchange(e) {if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {// console.log(e) var that = this;this.mapCtx = wx.createMapContext("map");this.mapCtx.getCenterLocation({type: 'gcj02',success: function(res) {var coordinate = that.gcj02towgs84(res.longitude, res.latitude) ;console.log(coordinate, 2222)that.setData({lat2: res.latitude.toFixed(6),lng2: res.longitude.toFixed(6),circles: [{latitude: res.latitude,longitude: res.longitude,color: '#FF0000DD',fillColor: '#d1edff88',radius: 0, //定位点半径 strokeWidth: 1}]})}})}},out_of_china(lng, lat) {return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);},gcj02towgs84(lng, lat) {var that = this;if (that.out_of_china(lng, lat)) {return [lng, lat]} else {var dlat = that.transformlat(lng - 105.0, lat - 35.0);var dlng = that.transformlng(lng - 105.0, lat - 35.0);var radlat = lat / 180.0 * PI;var magic = Math.sin(radlat);magic = 1 - ee * magic * magic;var sqrtmagic = Math.sqrt(magic);dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);var mglat = lat + dlat;var mglng = lng + dlng;return [lng * 2 - mglng, lat * 2 - mglat]}},transformlat(lng, lat) {var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;return ret},transformlng(lng, lat) {var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;return ret},})map{margin-top: 30rpx;
}
button{margin-bottom: 10rpx;width: 80%;margin-left: 10%;}
.title{margin: 30rpx;font-size: 45rpx;
}
.detail{margin-left: 30rpx;font-size: 38rpx;color: #999;margin: 20rpx 20rpx 20rpx 30rpx;
}
.top{padding: 30rpx;
}
.top view{margin-bottom: 10rpx;border-bottom: 1px solid;
}
input{margin-top: 10rpx;
}
.in_val{margin: 20rpx;border: 1px solid #d0d0d0;width: 340rpx;height: 60rpx;padding-left: 10rpx;border-radius: 5rpx;
}
.btn{height: 64rpx;margin-top: 20rpx;font-size: 30rpx;line-height: 64rpx;
}
.input_block{display: flex;flex-direction: row;
}
.aaa{margin-top: 20rpx;margin-left: 20rpx;background: darkorange;padding: 10rpx 30rpx 10rpx 30rpx;width: 200rpx;border-radius: 10rpx;color: white;
}
.bbb{top: 20rpx;margin-left: 20rpx;position: absolute;right: 30rpx;background: darkorange;padding: 10rpx 30rpx 10rpx 30rpx;width: 200rpx;border-radius: 10rpx;color: white;
}
.nav_register{background: #7DD43C;color: white;position: absolute;/* margin-top: 10rpx; */right: 30rpx;padding: 5rpx 20rpx 5rpx 20rpx;border-radius: 5rpx;
}
.nav_register2{background: #7DD43C;color: white;position: absolute;/* margin-top: 10rpx; */right: 230rpx;padding: 5rpx 20rpx 5rpx 20rpx;border-radius: 5rpx;
}
.c_icon{position: fixed;top: 50%;left: 50%;width: 50rpx;height: 60rpx;margin-top: -35rpx;margin-left: -30rpx;
}
/* index/index.wxss */
page{height: 100%;
}
.index_bt1{width: 100rpx;height: 100rpx;padding-top:30rpx;margin-left: 600rpx;
}.xiaoer{width: 100rpx;height: 100rpx;
}.index_shuaxin{width: 60rpx;height: 60rpx;padding-top: 860rpx;margin-left: 20rpx;
}.shuaxin{width: 60rpx;height: 60rpx;
}.sch{display: block;z-index: 999999;height: 69rpx;width:100%; margin:0 auto;padding-top: 30rpx;
}/*底部弹窗开始 -使屏幕变暗 */
.commodity_screen {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.2;overflow: hidden;z-index: 1000;color: #fff;
}
/*对话框 */
.commodity_attr_box {height: 280rpx;width: 100%;overflow: hidden;position: fixed;bottom: 0;left: 0;z-index: 2000;background: #fff;padding-top: 0rpx;
}.placeBox{width: 100%;height: 150rpx;
}.placeViewLt{display: inline-block;width: 620rpx;height: 140rpx;vertical-align: middle;
}.viewTitle{display: block;font-size: 38rpx;color: #3F51B5;margin-left: 20rpx;padding-top: 34rpx;
}.viewDis{display: inline-block;font-size: 26rpx;color: gray;margin-left: 20rpx;
}.viewAddr{display: inline-block;font-size: 28rpx;color: gray;margin-left: 20rpx;
}.placeViewRt{display: inline-block;width: 120rpx;height: 120rpx;padding-top: 6rpx;vertical-align: middle;
}.viewIcon{display: block;height: 100rpx;width: 100%;border-top: 1px solid #ebebeb;padding-top: 40rpx;
}.indexIcon{display: inline-block;width: 50rpx;height: 50rpx;margin-left: 40rpx;margin-top: -26rpx;vertical-align: middle;
}.timeText{display: inline-block;line-height: 45rpx;margin-left: 12rpx;text-align: center;width: 200rpx;height: 45rpx;background-color: rgb(230, 234, 255);border-radius: 10px;color: #3F51B5;font-size: 24rpx;
}.indexIcon1{display: inline-block;width: 50rpx;height: 50rpx;margin-top: -10rpx;margin-left: 110rpx;vertical-align: middle;
}.indexIcon2{display: inline-block;width: 50rpx;margin-top: -10rpx;height: 50rpx;margin-left: 20rpx;vertical-align: middle;
}.timeText1{display: inline-block;line-height: 45rpx;margin-left: 12rpx;width: 100rpx;height: 45rpx;color: #3F51B5;font-size: 24rpx;
}.timeText2{display: inline-block;line-height: 45rpx;margin-left: 12rpx;width: 200rpx;height: 45rpx;color: #3F51B5;font-size: 24rpx;
}
.btn-area{ width: 100%;}
.btn_no{ float:left;width: 40%; margin-left: 5%;border: 0px;}
.btn_ok{ float:left;width: 40%; margin-left: 10%;margin-right: 5%; border: 0px;}微信小程序 循迹功能制作相关推荐
- 微信小程序：意见反馈制作（1）（可加图片）
微信小程序:意见反馈制作(可加图片) 不同类型的微信小程序可能需要不同的意见反馈样式,仅以我做的为例,具体样式可自行修改 1.小程序自带意见反馈(非常简单) <button open-type= ...
- 微信点餐小程序怎么做？微信小程序点餐系统制作
顾客不用排队等待,打开微信扫一扫二维码,就能通过微信点餐支付,对于大部分餐厅来说,都已经成为常见的现象,小程序彻底融入了我们的生活,小程序也已经成为餐饮行业必备的工具.通过餐饮小程序,不仅可以让用户获 ...
- 微信小程序商城怎么在线制作
今天珍奶bb给大家简单唠唠微信小程序商城怎么在线制作的流程? 在唠微信小程序商城制作流程前,先给大家科普一下当前的实体经济环境是如何的?制作一个微信小程序商城是否存在它的必要性.不用看具体数据,就直接 ...
- 黯然微信小程序杂记（三）：微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
- 微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能 使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
- 微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能 使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
- 微信小程序拼团功能页面展示
微信小程序拼团功能页面展示 一.拼团功能 拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动 二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
- 微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍 本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
最新文章
- 11个让你吃惊的Linux终端命令
- R语言ggplot2可视化水平条形图的标题（title）、副标题(subtitle)和图片说明信息(caption)左对齐实战
- 如何为网页添加小宠物挂件：小老鼠、金鱼等
- lazada做代运营，价格越低越好吗？价格和价值分析
- JS中的HTML片段
- 计算机二级web题目（4）--CSS基础
- 每日一题（42）—— 已知一个数组table，用一个宏定义，求出数据的元素个数
- 《BOOST程序库完全开发指南》 第04章 实用工具
- 老毛子最想固件，支持打印机了
- linux uvc协议_linux uvc 深入理解(一)
- js 浏览器语音播报
- 基于51单片机MAX31865的PT100铂电阻测温设计
- r语言r-shiny_如何使用R Shiny进行EDA和预测
- 从管好事提升管理水平--创建事
- SQL语句中where 1=0是什么意思
- 软件测试用例的设计方法(第二篇)
- ubc 文学院 计算机,UBC大学电气与计算机教授获加拿大国家最高科学奖
- 图卷积神经网络(GCN)目前的应用领域
- 当我不再依赖你的时候说说_不再依赖任何人的说说 不依赖别人的经典语录
- trc20和erc20、OMNI有什么区别