微信小程式地圖(二) 跑步路線展示
阿新 • • 發佈:2019-02-10
剛開始研究小程式的地圖:簡單的跑步路線展示
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:
varpoint = []; 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); } });