《微信小程序实战（4） · 地图导航功能》

server/2024/9/25 4:42:50/

📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗

🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数，欢迎多多交流。👍

文章目录

    • 写在前面的话
    • 海报生成
      • 需求简介
      • 地图组件介绍
      • 后台位置共享
      • 足迹绘制
      • 选点绘制
      • 其他功能
    • 总结陈词

写在前面的话

本篇文章是小程序>微信小程序系列的第四篇，本着介绍地图导航小程序的核心地图功能。

相关文章
《小程序>微信小程序实战（1）· 开篇示例 》
《小程序>微信小程序实战（2） · 组件封装》
《小程序>微信小程序实战（3） · 推广海报制作》

海报生成

需求简介

要求实现小程序>微信小程序的地图功能清单如下：
1、用户可以共享位置信息，也可以看见他人的位置信息；

2、移动过程中要可以描绘足迹，同时保存后可以查看；

3、地图支持选点画线功能，同样支持保存分享；

上述三个需求点，分别对应地图的三个功能，下面一一展开。

地图组件介绍

小程序>微信小程序的地图组件是一个非常实用的功能，允许开发者在小程序中嵌入地图，展示地理位置、标记点、路线等信息。

1、地图组件基本用法

在小程序的 WXML 文件中使用 <map> 标签来创建地图组件：

<map longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" />

2、主要属性

longitude: 地图中心的经度。

latitude: 地图中心的纬度。

scale: 地图缩放级别，范围通常是 5 到 18。

markers: 地图上的标记点，通常是一个数组，包含多个标记的经纬度和其他信息。

3、标记点（Markers）

标记点是地图上显示的位置，可以通过设置 markers 属性来添加。每个标记点是一个对象，包含以下属性：

latitude: 标记点的纬度。

longitude: 标记点的经度。

title: 标记点的标题。

iconPath: 自定义标记图标的路径。

width: 图标的宽度。

height: 图标的高度。

this.setData({markers: [{id: 1,latitude: 23.099994,longitude: 113.324520,title: '标记点1',iconPath: '/images/marker.png',width: 50,height: 50}]
});

4、事件处理

地图组件支持多种事件，例如：

regionchange: 地图区域变化时触发。

markertap: 点击标记点时触发。

maptap: 点击地图时触发。

<map bindmarkertap="onMarkerTap" bindregionchange="onRegionChange" />

onMarkerTap(e) {console.log('点击了标记点', e.markerId);
},onRegionChange(e) {console.log('地图区域变化', e.type);
}

5、获取用户位置

可以使用小程序>微信小程序的 API 获取用户的地理位置，并将其设置为地图的中心：

wx.getLocation({type: 'wgs84',success: (res) => {this.setData({latitude: res.latitude,longitude: res.longitude});}
});

后台位置共享

前面介绍的都是基础用法，比较简单，可忽略，接下来开始正篇。

这个需求要拆解为两个部分：

1、共享自己的位置（上传位置信息）；

2、显示所有人的位置（定时获取）；

先看第一点，要共享自己的位置，同时要支持小程序>微信小程序切换至后台，仍然可以监听到位置变化。

需要借助小程序的onLocationChange支持位置变更，先看示例代码。


openLocationHandle() {let that = thiswx.getSetting({success(res) {if (res.authSetting['scope.userLocationBackground']) {that.startLocationUpdateBackground()app.globalData.hasStart = true} else {wx.authorize({scope: 'scope.userLocationBackground', success() {that.startLocationUpdateBackground()app.globalData.hasStart = true}, fail(err) {console.log('userLocationBackground失败，错误信息：', err)that.openSetting()}})}}})
},/*** 位置处理 - 开启小程序监听动作*/
startLocationUpdateBackground: function () {let that = thiswx.setStorageSync('oldLocation', -1);wx.setStorageSync('oldTime', -1);    // 开启小程序在前后台时均可接收位置消息wx.startLocationUpdateBackground({type: 'gcj02', success: function () {            // 监听实时地理位置变化事件// 需结合 wx.startLocationUpdateBackground、wx.startLocationUpdate使用wx.onLocationChange(that.onLocationChangeHandle)}, fail: function (err) {ace.msg('startLocation失败')console.log('startLocationUpdateBackground失败，错误信息：', err)that.openSetting()},})
},

首先，先授权一下scope.userLocationBackground后台监听权限，授权成功则可以调用wx.startLocationUpdateBackground打开后台位置变化监听功能，同时使用wx.onLocationChange监听微信变化，传入的回调函数里面可以将获取到的位置信息，不断上报。

要使用后台授权功能，app.json还需要添加配置如下，按需添加需要的API即可。

"requiredPrivateInfos": ["getLocation","chooseAddress","onLocationChange","startLocationUpdate","startLocationUpdateBackground"
]

核心的onLocationChangeHandle逻辑里面，可以将回传的经纬度不断上报到后端，部分代码如下。

下方代码可以通过位置变化和坐标变化幅度判断，避免频繁处理请求（还不够的话可以添加距离变化判断）。

onLocationChangeHandle: function (res) {let {latitude, longitude} = res//省略部分逻辑。。。// 获取上次保存的位置信息let oldLocation = wx.getStorageSync('oldLocation')// 获取这次获取的位置信息let nowLocation = latitude + ',' + longitude// 位置一样则退出，坐标没变化if (nowLocation === oldLocation) {return;}// 获取上次执行的时间let oldTime = wx.getStorageSync('oldTime')// 获取当前时间let currentTime = new Date().getTime()// 间隔时间小于6S退出if (!oldTime || currentTime - oldTime < 6000) {return;}// 上传位置信息，调后端逻辑。。。// 修改缓存数据wx.setStorageSync('oldLocation', nowLocation);wx.setStorageSync('oldTime', currentTime);
}

第二个点就简单多了，就写一个定时器，然后不断获取位置，利用map组件的标记功能即可。

核心代码如下：

// 定时获取所有人的实时位置
that.timeHandleGet();
shareIntervalNum = setInterval(function () {that.timeHandleGet();
}, 2000);
timeHandleGet() {let that = thislet payNo = that.data.payNo// 获取其他在线用户的位置ace.sendGet('xjStaffDict/locationShareList', function (data) {let newArr = [] //所有人的标记信息data.forEach(function (v, i) {// 非本人则渲染共享标记信息if (v.remark && v.staffId !== payNo) {let nowPositionArr = v.remark.split(',')let tempMark = that.markHandle("位置共享", nowPositionArr[1], nowPositionArr[0], v.realyName, "", i, v.staffId, v.realyImg);tempMark.payNo = v.staffIdnewArr.push(tempMark)}})that.setData({markers: newArr})}, "no");
},

足迹绘制

足迹绘制也是基于第一个需求，自身位置不断变化的过程中，把经纬度暂存下来，然后利用map组件的polyline属性，绘制路线，部分代码如下：

// 路线信息拼接
points.push({longitude: longitude, latitude: latitude})
let polyline = [{points: points, color: "#FF0000DD", width: 2, dottedLine: false
}];//更新路线和自己的坐标
that.setData({longitude: longitude, latitude: latitude
})
if (points.length > 1) {that.setData({polyline: polyline})
}
ace.msg('逻辑成功，节点数：' + points.length);//放入缓存，后续加载
wx.setStorageSync('pointsData', JSON.stringify(points));

过程示例图如下：

足迹保存后查看效果如下：

选点绘制

这项功能就更简单了，利用map组件的地图坐标点击监听方法bindtap实现。

部分代码如下：

mapClick(e) {let that = this;let pointHandleFlag = that.data.pointHandleFlag || falseif (pointHandleFlag) {//获取当前地图选点let markers = that.data.markers;let id = ace.generateUUID();let name = `选点${markers.length + 1}`let tempMark = that.markHandle('选点', e.detail.longitude, e.detail.latitude, '', name, markers.length, id);points.push(e.detail)markers.push(tempMark)if (points.length > 1) {let polyline = [{points: points, color: "rgba(5,197,95,0.87)", width: 2, dottedLine: false}];that.setData({markers, polyline})} else {that.setData({markers})}} else {console.log('当前非地图选点模式！')}
},

示例图如下：

其他功能

有了前面marker的基础，想实现打标记功能就很简单了。

制作一个表单页面，如下所示：

创建完成后，将坐标信息在地图加载出来，也可以增加坐标过滤功能，或者增加点击展示详情。

总结陈词

此篇文章是《小程序>微信小程序实战》系列的第四篇，实际代码量较大，由于篇幅所限，没有贴出全部代码，主要学习一个地图功能思想，感兴趣的可以留言交流，希望可以帮助到大家。

💗 后续会逐步分享企业实际开发中的实战经验，有需要交流的可以联系博主。


http://www.ppmy.cn/server/121664.html

相关文章

24年蓝桥杯及攻防世界赛题-MISC-1

24年蓝桥杯及攻防世界赛题-MISC-1

2 What-is-this AZADI TOWER 3 Avatar 题目 一个恐怖份子上传了这张照片到社交网络。里面藏了什么信息？隐藏内容即flag 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/tool-misc/outguess] └─$ outguess -r 035bfaa85410429495786d8ea6ecd296.jpg flag1.txt Reading 035bf…
阅读更多...
Redis常见知识点

Redis常见知识点

数据类型 String Redis字符串存储字节序列&#xff0c;包括文本、序列化对象和二进制数组。 默认情况下 单个Redis字符串最大值不能超过512m 常用命令 SETNX仅当键不存在时才存储字符串值。对于实现锁很有用。MGET在一次操作中检索多个字符串值。INCRBY原子地增加&#xff…
阅读更多...
详解 C++中的模板

详解 C++中的模板

目录 前言 一、函数模板 1.定义 2.函数模板的实现 3.模板函数的实例化 4.模板参数的省略 1.函数模板的实参推导 2.类模板的实参推导 3.默认模板参数 4.特殊情况:无法推导的模板 5.推导失败的情况 二、类模板 1.概念和定义 2.类模板定义 3.类模板的使用 4.类模板…
阅读更多...
23个Python在自然语言处理中的应用实例

23个Python在自然语言处理中的应用实例

在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;Python作为一门功能强大的编程语言&#xff0c;凭借其丰富的库和工具集&#xff0c;成为了实现各种NLP任务的首选。以下是一个关于Python在NLP中应用的广泛实例的前言&#xff0c;旨在概述Python在NLP领域的多样性和…
阅读更多...
力扣 中等 1901.寻找峰值II

力扣 中等 1901.寻找峰值II

文章目录 题目介绍题解 题目介绍 题解 需要明白一个事实&#xff1a;从任意一个点出发&#xff0c;可以经过一个递增路径&#xff0c;找到一个极大值点。 求出一行的最大值&#xff0c;如果这行最大值比上面的要小&#xff0c;那峰值&#xff08;之一&#xff09;就会在上面 …
阅读更多...
sqoop的安装与简单使用

sqoop的安装与简单使用

文章目录 一、安装1、上传&#xff0c;解压&#xff0c;重命名2、修改环境变量3、修改配置文件4、上传驱动包5、拷贝jar包 二、import命令1、将mysql的数据导入到hdfs上2、将mysql的数据导入到hive上3、增量导入数据 三、export命令1、从hdfs导出到mysql中2、从hive导出到mysql…
阅读更多...
Linux之实战命令02：shred应用实例(三十六)

Linux之实战命令02：shred应用实例(三十六)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…
阅读更多...
canvas练习画太阳花

canvas练习画太阳花

// file name: demo.html <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>练习</title><style>#myCanvas {box-shadow: 6px 9px 80px 13px rgba(0,0,0,.65);margin: 50px 400px;}</style></head>&…
阅读更多...
最新文章

Copyright @ 2022~2023