微信小程序腾讯地图bindregionchange事件导致图标闪烁的解决方法

微信小程序中的腾讯地图，我们讲地图上放置一些图标，如共享单车的位置，如果我们在bindregionchange的函数中写入寻找图标位置的代码，我们启动后，或者移动地图的中心位置后，就会出现图标闪烁的现象，解决这个现象的方法为：

例如我们写入的bindregionchange函数是：

  regionchange(e) {
    var that = this;
    if(e.type == "end") {
      that.mapCtx.getCenterLocation({
        success: function (res) {
          findBikes(that, res.longitude, res.latitude)
        }
      })
    }
  },

我们改为：

 regionchange(e) {
    var that = this;
    console.log(that)
    if (e.type == "end") {
      that.mapCtx.getCenterLocation({
        success: function (res) {
          var distance = getDistance(res.latitude, res.longitude, that.data.lat, that.data.log)
          console.log(distance)
          if ((res.latitude == that.data.lat && res.longitude == that.data.log) || distance < 1) {
            return;
          }
          findBikes(that, res.longitude, res.latitude)
        }
      })
    }
  },

最后我们在index.js的末尾添加一个函数：

function getDistance(lat1, lng1, lat2, lng2) {

    lat1 = lat1 || 0;

    lng1 = lng1 || 0;

    lat2 = lat2 || 0;

    lng2 = lng2 || 0;

    var rad1 = lat1 * Math.PI / 180.0;

    var rad2 = lat2 * Math.PI / 180.0;

    var a = rad1 - rad2;

    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;

    var r = 6378137;
    
    return (r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)))).toFixed(0)

  }

这样问题就可以解决了。

 

参考文献：

http://www.cnblogs.com/wjf0/p/9300710.html

https://www.jianshu.com/p/3d5efe4cffd1