美文网首页
微信小程序完成“走路线”小游戏功能（腾讯地图）

微信小程序完成“走路线”小游戏功能（腾讯地图）

作者: 程序员三千_ | 来源:发表于2021-07-30 09:53 被阅读0次

在网上搜索了好久（包括地图api）都没有类似的效果（也可能是我自己没找到吧），所以写篇文章记录下，主要难点：
1、都是用maker点标记的位置（小车和景点），怎么实现小车在景点的上方呢？
2、如果小车在景点的上方的时候，除了第一次点击的是景点坐标，后面每次点击都是小车的坐标了，那怎么实现小车的移动行走呢?
带着这几个问题看下面代码，会更好懂，不懂的点赞，评论区见

现在效果图：

  • 图一：走过的路线蓝色图标显示，没走过的按钮棕色图标显示
image.png

  • 图二：走完全部路线后的效果


    image.png

  • 图三 ：也可以给map加上polyline属性，具体实现看效果图，也可以走一次出一条线


    image.png

直接出代码，不懂的评论区见

  • js
// index.js
// 获取应用实例
const app = getApp()
const util = require('../../utils/util');

// 引入腾讯地图SDK核心类
var QQMapWX = require('../../lib/qqmap-wx-jssdk.js');
var qqmapsdk;
const moveId = 9999
const durationTime = 2000



Page({
  data: {
    location: {
      latitude: 30.561226249180805,
      longitude: 114.40526962280273
    },
    markers: [{
        id: 1,
        callout: {
          content: '群英荟萃',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',

        },
        latitude: 30.5927057909617,
        longitude: 114.41642761230469,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      },
      {
        id: 2,
        callout: {
          content: '武汉欢乐谷',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',

        },
        latitude: 30.59167141444739,
        longitude: 114.3951416015625,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      },
      {
        id: 3,
        callout: {
          content: '东湖飞鸟世界',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',

        },
        latitude: 30.573050749535245,
        longitude: 114.37625885009766,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      },
      {
        id: 4,
        callout: {
          content: '东湖',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',
        },
        latitude: 30.551322121233678,
        longitude: 114.36527252197266,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      },
      {
        id: 5,
        callout: {
          content: '庙湖',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',
        },
        latitude: 30.525596233215623,
        longitude: 114.37952041625977,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      },
      {
        id: 6,
        callout: {
          content: '风筝山',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS',
        },
        latitude: 30.530919389805096,
        longitude: 114.42054748535156,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      }, {
        id: 7,
        callout: {
          content: '情人坡',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS'
        },
        latitude: 30.524856882846002,
        longitude: 114.44114685058594,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',

      }, {
        id: 8,
        callout: {
          content: '蝴蝶谷',
          padding: 10,
          borderRadius: 2,
          display: 'ALWAYS'
        },
        latitude: 30.57260735678382,
        longitude: 114.42672729492188,
        iconPath: './imgs/location_normal.png',
        width: '34px',
        height: '34px',
      }, {
        id: moveId,
        latitude: '',
        longitude: '',
        iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
        width: '30px',
        height: '30px',
      },
    ],

    polyline: [
    //   {
    //   points: [{
    //       latitude: 30.5927057909617,
    //       longitude: 114.41642761230469,
    //     }, //群英荟萃
    //     {
    //       latitude: 30.59167141444739,
    //       longitude: 114.3951416015625,
    //     }, //武汉欢乐谷
    //     {
    //       latitude: 30.573050749535245,
    //       longitude: 114.37625885009766,
    //     } //东湖飞鸟
    //     , {
    //       latitude: 30.551322121233678,
    //       longitude: 114.36527252197266,
    //     } //东湖
    //     , {
    //       latitude: 30.525596233215623,
    //       longitude: 114.37952041625977,
    //     } //庙湖
    //     , {
    //       latitude: 30.530919389805096,
    //       longitude: 114.42054748535156,
    //     } //风筝山
    //     , {
    //       latitude: 30.524856882846002,
    //       longitude: 114.44114685058594,
    //     } //情人坡
    //     , {
    //       latitude: 30.57260735678382,
    //       longitude: 114.42672729492188,
    //     }, //蝴蝶谷
    //     {
    //       latitude: 30.5927057909617,
    //       longitude: 114.41642761230469,
    //     } //群英荟萃

    //   ],
    //   color: '#9cc7f9',
    //   width: 3
    // }
  ],
    scale: 12.5, //12.5
    isClick: true,
    nextId: null,
    tempList: [],
    mapCtx: null,
    startId: 1,
    isGo:false

  },

  onLoad() {
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: app.globalData.TXMapKey,
    });

    this.data.tempList = this.data.markers
    this.data.mapCtx = wx.createMapContext('map', this);
   

    wx.showModal({
      title: '提示',
      content: '请在地图上选择一个地点作为起点！',
      showCancel:false,
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    })
    

  },
  // 标注点击回调
  onTapMarker(event) {
    const version = wx.getSystemInfoSync().SDKVersion;
    var id = event.detail.markerId

    var length = this.data.markers.length;
    var maxId = this.data.markers[length - 2].id;

    console.log("maxId==", maxId)

    if (util.compareVersion(version, '2.13.0') < 0) {
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
      wx.showToast({
        title: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
        icon: 'none'
      });
      return;
    }

    

    if (this.data.nextId) { //不是首次

      // this.runRouterLater()


    } else { //首次点击
      this.data.startId = id;
      this.runRouter(id)

    }
  },
  /**
   * Go按钮
   */
  onGo(){

    if (!this.data.nextId) { 

      wx.showToast({
        title: '请在地图上选择一个地点作为起点！',
        icon: 'none'
      });

      return;

    }

    if (!this.data.isClick) {
      return;
    }
    this.data.isClick = false
    this.runRouterLater()

  },
  /**
   * 二次之后的点击
   */
  runRouterLater() {
    var id = this.data.nextId;

    var length = this.data.markers.length;
    var maxId = this.data.markers[length - 2].id;
    var list = [];

    for (var i = 0; i < this.data.markers.length; i++) {
      if (id == this.data.markers[i].id) {

        this.data.markers[i].iconPath = "./imgs/Marker1_Normal@3x.png"


        var list = [];
        list.push({
          latitude: this.data.markers[i].latitude,
          longitude: this.data.markers[i].longitude
        })
        if (id == maxId) {
          list.push({
            latitude: this.data.markers[0].latitude,
            longitude: this.data.markers[0].longitude
          })
          this.data.nextId = this.data.markers[0].id

        } else {
          list.push({
            latitude: this.data.markers[i + 1].latitude,
            longitude: this.data.markers[i + 1].longitude
          })
          this.data.nextId = this.data.markers[i + 1].id

        }
      
        console.log("move==", id + '->' + this.data.nextId)

        this.data.mapCtx.moveAlong({
          markerId: moveId,
          path: list,
          duration: durationTime,
          autoRotate: true,
          success: () => {

            if (this.data.nextId == this.data.startId) {
              wx.showToast({
                title: '完成此次行程',
                icon: 'none',

              });
              this.setData({
                isClick: false,
                isGo:true
              });
            } else {
              this.setData({
                isClick: true
              });
            }

          },

        });

        this.setData({
          markers: this.data.markers,

        });
      }
    }

  },
  /**
   * 首次点击
   * @param {}} data 
   */
  runRouter(data) {
    var id = data;

    var length = this.data.markers.length;
    var maxId = this.data.markers[length - 2].id;
    var list = [];

    for (var i = 0; i < this.data.markers.length; i++) {
      if (id == this.data.markers[i].id) {

        this.data.markers[i].iconPath = "./imgs/Marker1_Normal@3x.png"

        this.data.markers[i].isClick = true

        var list = [];
        list.push({
          latitude: this.data.markers[i].latitude,
          longitude: this.data.markers[i].longitude
        })
        if (id == maxId) {
          list.push({
            latitude: this.data.markers[0].latitude,
            longitude: this.data.markers[0].longitude
          })
          this.data.nextId = this.data.markers[0].id

        } else {
          list.push({
            latitude: this.data.markers[i + 1].latitude,
            longitude: this.data.markers[i + 1].longitude
          })
          this.data.nextId = this.data.markers[i + 1].id

        }

        console.log("move==", id + '->' + this.data.nextId)

        this.data.mapCtx.moveAlong({
          markerId: moveId,
          path: list,
          duration: durationTime,
          autoRotate: true,
          success: () => {


            this.setData({
              isClick: true
            });


          },

        });

        this.setData({
          markers: this.data.markers,

        });
      }
    }

  }

})
  • wxml

  <map id="map" class="map" markers="{{markers}}" latitude="{{location.latitude}}" longitude="{{location.longitude}}"
    scale="{{scale}}" bindmarkertap="onTapMarker" polyline="{{polyline}}" enable-zoom="{{false}}"
    enable-scroll="{{false}}" enable-poi="{{false}}"></map>
  <view class="button_content">
    <button catchtap="onGo" disabled="{{isGo}}" style="height:6vh">Go</button>
  </view>
  • wxss

.container{
  display: flex;
  flex-direction: column;
}
.map {
  width:100%;
  height: 90vh;
}

.button_content{
  height: 10vh;
  display: flex;
  flex-direction: row;
  align-items: center;
}

相关文章

网友评论

      本文标题：微信小程序完成“走路线”小游戏功能（腾讯地图）

      本文链接：https://www.haomeiwen.com/subject/cnuqvltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|微信小程序完成“走路线”小游戏功能（腾讯地图）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！