几个月前踩过一个坑，在微信小程序页面上，用setData更新地图上的marker数据，地图并不会改变，而且这个问题当时只在真机上调试才会发生，之前在小程序开发工具中调试并没有发现，使我开发到很晚还要回过头来找问题，浪费了不少时间，当时也用一篇博客记录了这个问题 https://blog.brain1981.com/1696.html，用地图组件控制接口wx.createMapContext的translateMarker方法修改坐标，绕过了这个坑。
大半年过去了，似乎已经淡忘了这个问题，这几天那个小程序有个较大的继续开发需求，使我又回到了小程序开发中来。测试了一下之前的地图，发现translateMarker修改坐标在真机上居然也有小概率会失效。原因暂时不明。微信小程序在这半年里面已经更新过二十多个版本，自然也没办法去追述到底是更新导致了我的问题，还是当时就没写好… 不过时隔多日再回头看文档，发现还是有一些新东西可用的。
先想办法解决这个老问题，查了一下资料，原来map这种级别高的系统原生组件，是不会跟着页面数据的修改而重新渲染的。如果要更新map上的marker，势必要重新渲染map，那么就要强制渲染一下。最简单的方法是给map组件上添加一个if语法。通过绑定map的值（0或1），修改map组件的显示与否
<map id="searchMap" longitude="{{map_longitude}}" latitude="{{map_latitude}}" scale="{{map_scale}}" markers="{{map_markers}}" show-location wx:if="{{map}}">
</map> |
然后修改marker数据的时候顺便也把map给重置一下
this.setData({ map_longitude: map_longitude, map_latitude: map_latitude, map_markers: map_markers, map: 0 }); this.setData({ map:1 }); |
当然，我现在更喜欢另一种方法，就是用wx.createMapContext的includePoints方法把显示范围刷一下
var points = [{ longitude : map_longitude, latitude : map_latitude }]; this.setData({ map_markers: map_markers, map_latitude: map_latitude, map_longitude: map_longitude, }); this.mapCtx.includePoints({ padding: [50,50,50,50], points: points }); |
这个方法看似代码量会多一些，但可以通过多加几个points趁机调整一下地图的显示范围，使地图显得美观。
此外，现在可以在map上加cover-view来自定义控制组件了，这样可以做的事情就更多了，比如我自定义了回到当前坐标，以及缩放地图的按钮：
moveToLocation: function () {//回到当前定位坐标 this.mapCtx.moveToLocation(); }, addMapScale: function () {//增加缩放 var that = this; this.mapCtx.getScale ({ success: function (res) { console.log(res.scale); that.setData({ map_scale: res.scale + 1}) } }) }, minusMapScale: function () {//减小缩放 var that = this; this.mapCtx.getScale({ success: function (res) { console.log(res.scale); that.setData({ map_scale: res.scale -1}) } }) }, |
总结一下，如果要操作map组件的重新渲染，第一个方法就是利用wx:if把map隐藏再显示一下，粗暴没商量。
但还是推荐官方的方法，通过地图控制接口wx.createMapContext的各种方法去修改地图的显示，让地图真正的“动起来”。
本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/1840.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。
本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。