解决微信小程序调用moveToLocation失效问题【超简单】

问题描述

在使用微信小程序开发过程中，当我们使用map组件提供的moveToLocation()方法时，可能会出现无法移动到指定位置的情况，即moveToLocation()方法失效现象。造成这种情况的原因可能是多方面的。

解决步骤

步骤一：检查wx:key属性是否有设置

我们在使用wx:for渲染列表时，需要设置每个子项的唯一标识 wx:key，否则会报错，但可能存在一些情况组件绑定的数据结构可能出现异常，导致无法设置wx:key。出现这种情况时，需要注意一下是否存在异常数据结构导致wx:key未成功设置，应该通过检查过程中是否抛出异常来判断。

步骤二：检查是否已授权使用地理位置信息

当我们在小程序中使用位置信息时，需要先向用户请求位置授权，如果授权失败，那么使用moveToLocation()方法无法正常工作。需要开发者通过以下方式获取授权：

wx.getSetting({
  success (res) {
    if (!res.authSetting['scope.userLocation']) {
      wx.authorize({
        scope: 'scope.userLocation',
        success () {
          // 用户已经同意小程序使用位置信息
        },
        fail () {
          // 用户未授权小程序使用位置信息
        }
      })
    }
  }
})

步骤三：检查地图组件的宽度和高度

在设置map组件的宽度和高度时，需要明确知道实际需要的宽度和高度，增加微调，保证组件的宽高不超出容器，否则可能会导致moveToLocation()方法无效。

步骤四：其他可能的解决方法

1. 检查地图初始化时的缩放等级，如果缩放等级过高，可能导致moveToLocation()方法失效;

2. 检查是否正确设置经纬度信息。如果设置的经纬度信息有误，会导致moveToLocation()无效。

示例说明

示例一

以下示例代码演示了如何通过检查授权状态来解决moveToLocation()失效的问题：

wx.getSetting({
  success (res) {
    if (!res.authSetting['scope.userLocation']) {
      wx.authorize({
        scope: 'scope.userLocation',
        success () {
          // 用户已经同意小程序使用位置信息
          wx.getLocation({
            success(res) {
              const latitude = res.latitude;
              const longitude = res.longitude;
              wx.createMapContext('map').moveToLocation({
                latitude,
                longitude,
                fail: function(res) {
                  wx.showToast({
                    title: '移动定位失败',
                    icon: 'none'
                  });
                }
              });
            },
            fail() {
              wx.showToast({
                title: '获取定位信息失败',
                icon: 'none'
              });
            }
          });
        },
        fail () {
          // 用户未授权小程序使用位置信息
          wx.showToast({
            title: '未授权位置信息',
            icon: 'none'
          });
        }
      })
    }
  }
})

示例二

以下示例代码演示了如何通过检查wx:key属性来解决moveToLocation()失效的问题:

<view>
  <map show-location location="{{true}}" style="width: 100%; height: 400rpx;" wx:key="id" 
    markers="{{markers}}"
    bindregionchange="regionchange"
    ></map>
</view> 

Page({
  data: {
    markers: [{
      id: 1,
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园'
    }]
  },
  regionchange(e) {
    console.log(e.type)
    if (e.type === 'end') {
      this.mapCtx.getCenterLocation({
        success: function(res){
          console.log(res.longitude)
          console.log(res.latitude)
        }
      })
    }
  },
  onReady: function (e) {
    // 使用 wx.createMapContext 获取 map 上下文
    this.mapCtx = wx.createMapContext('map');
  }
})

在以上示例中，我们已经设置了wx:key属性，并成功渲染了markers数据，确保wx:key属性的设置没有任何问题, 因此在调用moveToLocation()方法时，不会出现因为wx:key的设置问题导致的失效。