微信小程序地图显示路径问题

正在做一个项目，要用微信小程序上传自己的实时位置，然后再地图界面显示一条路径，思路是点击按钮开始上传，再点击一下按钮停止上传。位置用api获取后存到一个数组里，然后再把数组定时赋给markers，在地图上渲染出来。
wxml代码：

 <view class="container">  <view >    <view >      <map        style="width: 100%; height: 300px;"        latitude="{{latitude}}"        longitude="{{longitude}}"        markers="{{markers}}"        polyline="{{poliline}}"        >      </map>    </view>    <button catchtap="path">{{path}}</button>     <button bindtap="location">上传位置</button>  </view></view> 

js中按钮点击事件代码：

path: function () {    var that = this    if (this.data.path == "上传路径") {      this.setData({        path: "停止上传"      })      var i = 0,      interval = setInterval(function () {          i = i + 0.001,            wx.getLocation({          type: 'wgs84',          success: function (res) {            var latitude = res.latitude            var longitude = res.longitude            var speed = res.speed            var accuracy = res.accuracy            path.push({ latitude: latitude, longitude: longitude + i, iconPath:'../../images/location.png'})            that.setData({              markers:path            });          },          fail: function (res) {            console.log(res)          }        })        i=i+0.0001;      }, 5000) //循环时间 这里是5秒     } else {      this.setData({        path: "上传路径"      })      clearInterval(interval)    }  },

这里用i每次增加0.001来模拟人走路。
发现小程序的IDE有个BUG，路径的小标记物不能显示，但是在真机上可以。
界面：

点击上传路径后的效果图：

最后一个没有解决的问题，困扰了我很久，为什么取消interval总是不成功呢，点击后还是一直更新路径！