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

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

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

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

微信小程序地图插件系列（二）：微信小程序使用百度地图（不定期补充知识点）
前言当我们在使用一些地图相关软件的情况下,他会显示选择那种.一般都有高德地图,百度地图等.那么我们在微信小程序中也想使用这种功能需要怎么办呢? 本文地址链接微信小程序-百度地图SDK官方文档微信 ...
微信小程序微信小程序地图搜索、地图搜索点点击出callout气泡标题说明
实现效果:根据楼盘名称实现地图定位.周边搜索: 代码: html <view class="mapinfo"><view class="mapbd&qu ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...
微信小程序地图组件和相机组件实现基于location的AR效果的尝试（失败）
微信小程序地图组件和相机组件实现基于location的AR效果的尝试(失败) 最近无论AR还是微信小程序都是炒的火热.微信小程序的特点便是"无需安装,用完即走",而我们所说的AR用 ...
微信小程序地图获取地点信息（打卡签到功能为例）-2020-7-26
目录微信小程序地图获取地点信息(打卡签到功能为例) 效果图前提步骤首先需要了解的代码部分配置性代码功能性代码 demo 下载微信小程序地图获取地点信息(打卡签到功能为例) 解决方案:利用 ...
微信小程序地图使用用户头像标记
一.在开发微信小程序地图的过程中,有这样一个需求,用户发表祝福语,然后存入数据库,可以在地图上显示用户头像并且点击用户头像时显示祝福语. 二.自己在开发时遇到的问题: 1.微信头像是网络图片,而地图的 ...
php小程序地图处理,微信小程序地图map详解及简单实例
微信小程序地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...

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

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

最新文章

热门文章