微信小程序地图(二) 跑步路线展示

刚开始研究小程序的地图：简单的跑步路线展示

wxml :

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="18" polyline="{{polyline}}"show-location style="width: 100%; height: 300px;"></map>
<button bindtap="start">开始</button>
<button bindtap="end">结束</button>

js:

var point = [];
var that2;

function drawline() {
    that2.setData({
       polyline : [{
          points : point,
           color : '#99FF00',
           width : 4,
           dottedLine : false
       }]
    });
}

//获取经纬度
function getlocation() {
    var lat, lng;
    wx.getLocation({
       type : 'gcj02',
        success : function (res) {
            lat = res.latitude;
            lng = res.longitude;
            point.push({latitude: lat, longitude : lng});
            console.log(point);
        }
    });
}

Page({
   data : {
       polyline : [],
   },

    onLoad : function () {
        that2 = this;
        wx.getLocation({
           type: 'gcj02',
            success : function (res) {
                that2.setData({
                    longitude : res.longitude,
                    latitude : res.latitude,
                });
            }
        });
    },

    start : function () {
        this.timer = setInterval(repeat, 1000);
        function repeat() {
            console.log('re');
            getlocation();
            drawline();
        }
    },
    end : function () {
        console.log('end');
        clearInterval(this.timer);
    }
});

参考：http://www.pps.tv/w_19rtrtjc4d.html#curid=8988136609_ad4b311fa0db07cc2fa8b075be37f430