几个月前，我踩了一个坑。在微信小程序页面上，我使用setData更新了地图上的标记数据。该映射不会更改，并且仅在实际计算机上调试时才会发生此问题。小程序开发工具中的调试找不到了，这使我回头去寻找开发后期的问题，并浪费了很多时间。当时，我还在博客中记录了此问题，并使用地图组件控制了接口wx.createMapContext。 translateMarker方法修改坐标并绕过该凹坑。

已经半年多了，看来我已经忘记了这个问题。在过去的几天中，小程序对持续开发的需求很大，这使我回到了小程序开发。我测试了之前的地图，发现由translateMarker修改的坐标在真实机器上失败的可能性很小。原因暂时未知。 微信小程序在过去六个月中，已更新了20多个版本。自然地，没有办法跟踪更新是引起我的问​​题还是当时没有写……但是几天后，我回头看了看该文档，发现它仍然有一些新功能。

首先找到一种解决此旧问题的方法，检查信息，修改页面数据后将不会重新呈现原始的高级系统本机组件（例如map）。如果要更新地图上的标记，则必须重新渲染地图，因此必须强制渲染。最简单的方法是向地图组件添加if语法。通过绑定map的值（0或1），是否修改map组件的显示

然后通过修改标记数据的方式重置地图

this.setData({ map_longitude: map_longitude, map_latitude: map_latitude, map_markers: map_markers, map: 0});this.setData({ map:1});

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});

var points = [{经度：map_longitude，纬度：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}）;

此方法似乎有更多代码，但是您可以通过添加更多点来使地图看起来更漂亮来调整地图的显示范围。

此外，现在您可以向地图添加封面视图以自定义控件组件，因此您可以做更多的事情，例如，我自定义按钮以返回到当前坐标并缩放地图：

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}) } }) },

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（）{//缩小= this; this .mapCtx.getScale（{success：function（res）{console.log（res.scale）; that.setData（{map_scale：res.scale -1}）}}）}）的缩放变量

总而言之，如果要操作地图组件的重新渲染，第一种方法是使用wx：if隐藏地图然后显示它。这很粗鲁，没有讨论。

但是，仍然建议使用官方方法通过地图控制界面wx.createMapContext的各种方法来修改地图的显示，以使地图真正“移动”。

本网站上的所有文章均为原创，欢迎转载，请注明文章出处：百度和各种收集站都不可靠，搜索时请谨慎。技术文章通常对时间敏感，并且我习惯于不时修改和更新我的博客文章，因此，请访问源以查看本文的最新版本。

此站点记录了近年来工作中遇到的一些技术问题以及解决过程，“收藏”还包括我的大部分作品。除了此博客之外，我们的网站-JennyStudio工作室还有更多作品评论和展示。