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

正在做一个项目，要用微信小程序上传自己的实时位置，然后再地图界面显示一条路径，思路是点击按钮开始上传，再点击一下按钮停止上传。位置用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总是不成功呢，点击后还是一直更新路径！