关闭IC61中marker的闪烁

关闭IC61中marker的闪烁,第1张

可以看到拖动地图出现明显的闪烁来关闭。

使用微信小程序地图动态展示marker,当用户拖拽或缩放地图时需要加载当前区域内的marker。

移动地图,动态加载marker,地图上的marker无明显闪烁现象,让用户感觉不到marker刷新了。或者能否提供插入或删除单个marker的方法,这种批量 *** 作marker的效率太低了。

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

二枯并、自己在开发时遇到的问题:

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 = 0i <list.lengthi++) {

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)

}

})

},

五、效果截图


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12211208.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存