微信小程序地图开发经验更新

几个月前踩过一个坑,在微信小程序页面上,用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 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

2 关于 “微信小程序地图开发经验更新” 的评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注