微信小程序地图api开发真机预览崩溃

前言

微信小程序开发地图api中遇到了一个坑，ide上跑起来没有问题，放到真机上预览就像抽了一样乱蹦乱跳，然后crash..

背景

小程序中有图标1记录了当前用户的位置，现在还要一个图标2记录地图中心的位置，用户可以移动地图，将他想要选择的目的地移动到地图的中心就好了

主题

1.那么先看看布局，布局很简单，如下见

<view class="map-view">
<map id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" controls="{{controls}}" show-location bindregiοnchange="regionchange" bindcontroltap="controlstap" style="width: {{mapWidth}}; height: {{mapHeight}};top: {{mapTop}}"/>
</view>

2.监听用户移动的地图的方法小程序也给出了，布局中的bindregionchange就是，重写下：

regionchange(e) {
    // 地图发生变化的时候，获取中间点，也就是用户选择的位置
    if (e.type == 'end') {
      var that = this;
      this.mapCtx.getCenterLocation({
      success: function (res) {
        that.setData({
          longitude: res.longitude
          , latitude: res.latitude
        })

        // that.setData({
        //   long: res.longitude
        //   , lat: res.latitude
        // })
 
      }
    })
  }

  看似也没什么毛病，布局中的经度(latitude)纬度(longitude)就是记录中心位置的，我移动地图的话重置经纬度也应该在监听地图移动的实现，IDE上跑起来也流畅，然真机上预览就出问题了，乱动一通后就崩溃了。

  至今也没想明白问题出在哪儿，现在想了一个办法，在page中data设置两个变量long，lat来记录中心位置，也就是代码片段中注释的部分，真机上跑起来就没问题了。

附上小程序地图api链接：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html