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

现在效果图：

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

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

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

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

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

倔金、简书同步发布

倔金、简书同步发布

倔金、简书同步发布