微信小程序完成“走路線”小游戲功能（騰訊地圖）

在網(wǎng)上搜索了好久（包括地圖api）都沒有類似的效果（也可能是我自己沒找到吧）队魏，所以寫篇文章記錄下喳魏，主要難點：
1悲柱、都是用maker點標(biāo)記的位置（小車和景點）民晒，怎么實現(xiàn)小車在景點的上方呢芙贫？
2搂鲫、如果小車在景點的上方的時候，除了第一次點擊的是景點坐標(biāo)磺平，后面每次點擊都是小車的坐標(biāo)了魂仍，那怎么實現(xiàn)小車的移動行走呢?
帶著這幾個問題看下面代碼，會更好懂拣挪，不懂的點贊擦酌，評論區(qū)見

現(xiàn)在效果圖：

圖一：走過的路線藍色圖標(biāo)顯示，沒走過的按鈕棕色圖標(biāo)顯示

image.png

圖二：走完全部路線后的效果

image.png

圖三：也可以給map加上polyline屬性菠劝，具體實現(xiàn)看效果圖赊舶，也可以走一次出一條線

image.png

直接出代碼，不懂的評論區(qū)見

// index.js
// 獲取應(yīng)用實例
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: '風(fēng)箏山',
          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,
    //     } //風(fēng)箏山
    //     , {
    //       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('用戶點擊確定')
        }
      }
    })
    

  },
  // 標(biāo)注點擊回調(diào)
  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) {
      // 如果希望用戶在最新版本的客戶端上體驗?zāi)男〕绦蛄剑梢赃@樣子提示
      wx.showToast({
        title: '當(dāng)前微信版本過低，無法使用該功能甫何，請升級到最新微信版本后重試出吹。',
        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;
}

最后編輯于：2021.07.30 15:07:52

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末辙喂，一起剝皮案震驚了整個濱河市捶牢，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌巍耗，老刑警劉巖秋麸，帶你破解...
沈念sama閱讀 216,544評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異炬太，居然都是意外死亡灸蟆，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,430評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門亲族，熙熙樓的掌柜王于貴愁眉苦臉地迎上來炒考，“玉大人，你說我怎么就攤上這事霎迫≌啵” “怎么了？”我有些...
開封第一講書人閱讀 162,764評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵知给，是天一觀的道長瓤帚。經(jīng)常有香客問我描姚，道長，這世上最難降的妖魔是什么戈次？我笑而不...
開封第一講書人閱讀 58,193評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任轩勘，我火速辦了婚禮，結(jié)果婚禮上怯邪，老公的妹妹穿的比我還像新娘绊寻。我一直安慰自己，他們只是感情好擎颖，可當(dāng)我...
茶點故事閱讀 67,216評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布榛斯。她就那樣靜靜地躺著，像睡著了一般搂捧。火紅的嫁衣襯著肌膚如雪驮俗。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,182評論 1贊 299
城市分裂傳說
那天允跑，我揣著相機與錄音王凑，去河邊找鬼。笑死聋丝，一個胖子當(dāng)著我的面吹牛索烹，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播弱睦，決...
沈念sama閱讀 40,063評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼百姓，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了况木？” 一聲冷哼從身側(cè)響起垒拢，我...
開封第一講書人閱讀 38,917評論 0贊 274
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎火惊，沒想到半個月后求类，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,329評論 1贊 310
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡屹耐，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,543評論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年尸疆，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惶岭。...
茶點故事閱讀 39,722評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡寿弱，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出按灶，到底是詐尸還是另有隱情脖捻，我是刑警寧澤，帶...
沈念sama閱讀 35,425評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布兆衅，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏羡亩。R本人自食惡果不足惜摩疑，卻給世界環(huán)境...
茶點故事閱讀 41,019評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望畏铆。院中可真熱鬧雷袋，春花似錦、人聲如沸辞居。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,671評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽瓦灶。三九已至鸠删，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間贼陶，已是汗流浹背刃泡。一陣腳步聲響...
開封第一講書人閱讀 32,825評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碉怔，地道東北人烘贴。一個月前我還...
沈念sama閱讀 47,729評論 2贊 368
代替公主和親
正文我出身青樓，卻偏偏與公主長得像撮胧，于是被迫代替她去往敵國和親桨踪。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,614評論 2贊 353

微信小程序完成“走路線”小游戲功能（騰訊地圖）

直接出代碼，不懂的評論區(qū)見

推薦閱讀更多精彩內(nèi)容