微信小程序地图使用用户头像标记

一、在开发微信小程序地图的过程中，有这样一个需求，用户发表祝福语，然后存入数据库，可以在地图上显示用户头像并且点击用户头像时显示祝福语。

二、自己在开发时遇到的问题：

1.微信头像是网络图片，而地图的markers中的iconPath只能使用本地图片

2.将网络图片缓存到本地，但是因为小程序的异步执行导致图片不能显示

三、解决办法：

1.解决微信头像是网络图片的问题，可以使用wx.downloadFile({})方法来将头像缓存到本地，然后再将本地路径赋给iconPath即可，第一个不能使用网络图片的问题解决。

2.异步请求导致本地缓存的图片不能在地图上显示，我的解决办法是，先通过request请求获取到祝福语后，用for循环赋值给markers，iconPath路径填写一个本地路径，同时调用一个方法，获取当前用户头像的本地缓存路径，获取成功后赋值给markers中每个对象的iconPath，所以一般来说，地图上的图片会有切换，首先显示的是本地的统一的图片，经过一段时间的请求后，图片一个个变为用户头像。

四、相关操作代码

getBlessing: function(){var that = this;var getUserPic = function (pic_url,i) {let cachePath;if(pic_url==null || pic_url=='') return;wx.downloadFile({url: pic_url,success: (pathInfo) => {// pathInfo.path 这是下载成的缓存链接，模拟器marker有时不支持http开头，真机不影响，得去掉http:/cachePath = pathInfo.tempFilePath.replace("http:/", '').replace("https:/", '')//真机中无需replace，都支持，var mak = "markers[" + i +"].iconPath";that.setData({[mak]: cachePath})}})}wx.request({url: '你的后台请求地址',method: 'POST',success: function (res) {var list = res.data.list;var tempArr = [];var includeArr = [];var item = {};var includeItem = {};for (var i = 0; i < list.length; i++) {var pic = getUserPic(list[i].user.user_pic,i);item = {iconPath: '/images/icon/small-logo.png',id: list[i].id,latitude: list[i].latitude,longitude: list[i].longitude,width: 30,height: 30,alpha: 0.8,callout: {content: list[i].content,color: '#FFFFFF',fontSize: 10,borderRadius: 10,bgColor: '#F44336',padding: 5,display: 'BYCLICK',//'BYCLICK':点击显示; 'ALWAYS':常显}}includeItem = {latitude: list[i].latitude,longitude: list[i].longitude,}tempArr.push(item);includeArr.push(includeItem);}that.setData({markers: tempArr,includepoints: includeArr,count: res.data.count})console.log(that.data.markers)}})},

五、效果截图

微信小程序地图使用用户头像标记相关推荐

php取微信名字和头像,微信小程序如何获取用户头像和昵称
本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: {{userInfo.nickName}} user.js //sort.js //獲取應用實例 var ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
【微信小程序】获取用户头像和ID
课程中国海洋大学22夏<移动软件开发> 实验名称实验1:第一个微信小程序一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步 ...
微信小程序最新调用用户头像以及昵称
众所周知:微信小程序开发是面对"公告"编程,小程序的api更新迭代之快,让人叫苦不堪,,, 最近开发小程序项目时,获取用户头像和昵称的方式发生了很大的改变: 它居然绑定到一个 bu ...
微信小程序如何获取用户头像昵称
微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息,按照官方推荐会显示用户在微信的头像和昵称,本文介绍一下实现方案. ...
关于微信小程序如何获取用户头像（保存到本地）新方法
传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗,需要用户授权,但是在使用时候会有官方log提醒你,这个方法需要升级.新方法则无需用户授权,使用方法如下: <open-data ...
【微信小程序开发】用户头像昵称获取规则调整 2022
之前通过wx.getUserInfo获取用户的头像.昵称等信息 2021年4月调整为通过wx.getUserProfile获取用户的头像.昵称等信息详情请看:https://developers.w ...
微信小程序直接获取用户头像、昵称等（无需按钮授权）
直接使用微信提供的组件在页面使用获取用户头像.昵称头像是直接返回图片需要对样式进行修改,其它数据也是直接展示头像圆角需要加这个,否则实现不了
微信小程序无法获取用户头像和昵称，微信小程序获取昵称为微信用户，头像为灰色，请使用下面方式过去
getUserProfile(e) { wx.getUserProfile({ desc: '使用户得到更好的体验', success: (res) => { console.log(" ...

微信小程序地图使用用户头像标记

微信小程序地图使用用户头像标记相关推荐

最新文章

热门文章