1. 程式人生 > >微信小程式地圖(二) 跑步路線展示

微信小程式地圖(二) 跑步路線展示

剛開始研究小程式的地圖:簡單的跑步路線展示

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); } });