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

柔光的暖阳◎ 2022-05-25 23:10 653阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，653人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序地图

地图组件：完成两大功能：A .显示地理位置；B .标记建筑物。 1、完成最简单的地图显示：为通过CSS设置一个宽度和高度。 2、如何显示指定位置的地图：

迈不过友情╰/ 2023年07月19日 10:45/ 0 赞/ 75 阅读

相关微信小程序地图实现展示路线路

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

向右看齐/ 2023年02月16日 06:59/ 0 赞/ 57 阅读

相关微信小程序地图功能

一，显示地图 <map id="map" longitude="{ {longitude}}" latitude="{ {latitude

Dear 丶/ 2022年12月20日 02:55/ 0 赞/ 292 阅读

相关微信小程序学习路线

`之前有学弟问我如何学习小程序开发，以下是我的学习路线，大家仅供参考` ![这里写图片描述][70] -------------------- 欢迎加我微信，一起交流，

骑猪看日落/ 2022年05月26日 04:09/ 0 赞/ 316 阅读

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

刚开始研究小程序的地图：简单的跑步路线展示 wxml : <map id="map" longitude="{ {longitude}}" latit

柔光的暖阳◎/ 2022年05月25日 23:10/ 0 赞/ 654 阅读

相关微信小程序通过腾讯地图规划路线

参考：[https://blog.csdn.net/u011330225/article/details/74612620][https_blog.csdn.net_u0113

分手后的思念是犯贱/ 2022年05月25日 04:53/ 0 赞/ 554 阅读

相关微信小程序开发路线

注意：web知识和后端知识不够的千万别一开始就用腾讯的快速开发-Wafer 服务端！注意：web知识和后端知识不够的千万别一开始就用腾讯的快速开发-Wafer 服务端！

系统管理员/ 2022年05月20日 02:53/ 0 赞/ 419 阅读

相关微信小程序-从零开始制作一个跑步微信小程序

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

不念不忘少年蓝@/ 2022年04月02日 04:28/ 0 赞/ 360 阅读

相关微信小程序地图组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 地图（v2.7.0 起支持[同层渲染][Link 1]，相关api [wx.createMapC

﹏ヽ暗。殇╰゛Y/ 2021年09月08日 07:14/ 0 赞/ 1090 阅读

相关微信小程序地图组件

index.wxml <map id="map" markers="{ {markers}}" longitude="{ {longitu

女爷i/ 2021年07月25日 01:34/ 0 赞/ 747 阅读