微信小程序引用Map地图规划制定路径行走并显示路径-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序引用Map地图规划制定路径行走并显示路径。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

先上个效果图：

//index.wxml


  <map id="map"
    latitude="{{latitude}}"
    longitude="{{longitude}}"
    scale="{{scale}}"
    markers="{{calloutMarkers}}" 
    polyline="{{polyline}}"
    ></map>

//index.wxss


map{
  width: 100%;
  height: 100vh;
}

//index.js


const app = getApp()
// 路径数据
const INIT_POLYLINE = {
  points: [{
      latitude: 40.040129,
      longitude: 116.274968
    },
    {
      latitude: 40.038974,
      longitude: 116.275214
    },
    {
      latitude: 40.038974,
      longitude: 116.275214
    },
    {
      latitude: 40.038565000000006,
      longitude: 116.272683
    },
    {
      latitude: 40.03848200000001,
      longitude: 116.27209500000001
    },
    {
      latitude: 40.03836100000001,
      longitude: 116.27074
    },
    {
      latitude: 40.03832700000001,
      longitude: 116.270515
    },
    {
      latitude: 40.03807400000001,
      longitude: 116.268038
    },
    {
      latitude: 40.03801400000001,
      longitude: 116.26763600000001
    },
    {
      latitude: 40.03801400000001,
      longitude: 116.26763600000001
    },
    {
      latitude: 40.03790800000001,
      longitude: 116.267508
    },
    {
      latitude: 40.03450300000001,
      longitude: 116.270961
    },
    {
      latitude: 40.03419900000001,
      longitude: 116.271221
    },
    {
      latitude: 40.03396500000001,
      longitude: 116.271401
    },
    {
      latitude: 40.03245000000001,
      longitude: 116.272472
    }
  ],
  color: '#3875FF',
  width: 8,
  dottedLine: false,
  arrowLine: false,
  borderWidth: 0,
  arrowLine: true
  // colorList: ['#3875FF']
};
// 气泡窗口 我
const INIT_CALLOUT1 = {
  content: '我',
  padding: 12,
  display: 'ALWAYS',
  fontSize: 14,
  textAlign: 'center',
  borderRadius: 4,
  borderWidth: 2,
  bgColor: '#ffffff'
};
// 气泡窗口 充小猫
const INIT_CALLOUT2 = {
  content: '小猫',
  padding: 12,
  display: 'ALWAYS',
  fontSize: 14,
  textAlign: 'center',
  borderRadius: 4,
  borderWidth: 2,
  bgColor: '#ffffff'
};
// 覆盖物点 我
const INIT_CALLOUT_MARKER1 = {
  id: 1,
  callout: {
    ...INIT_CALLOUT1
  },
  latitude: 40.03245000000001,
  longitude: 116.272472,
  width: 30,
  height: 40
};
// 气覆盖物点 小猫
const INIT_CALLOUT_MARKER2 = {
  id: 2,
  callout: {
    ...INIT_CALLOUT2
  },
  latitude: 40.040129,
  longitude: 116.274968,
  width: 30,
  height: 40
};

Page({
  data: {
    // 中心点经纬度
    latitude: 40.03245000000001,
    longitude: 116.272472,
    // 地图缩放等级
    scale: 15,
    // 路径数据
    polyline: [],
    // 标记点数据
    calloutMarkers: [],
  },
  onLoad() {
    // 1.创建 map 上下文 Context 对象，传入 map id
    this.mapCtx = wx.createMapContext('map');

    // 2.设置路径及点位
    this.setData({
      polyline: [{
        ...INIT_POLYLINE
      }],
      calloutMarkers: [{
        ...INIT_CALLOUT_MARKER1
      }, {
        ...INIT_CALLOUT_MARKER2
      }]
    })

    // 3.开始移动,这里我做了个循环的效果
    this.run()
  },
  run() {
    this.mapCtx.moveAlong({
      markerId: 2,
      path: this.data.polyline[0].points,
      duration: 10000,
      autoRotate: true,
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  }
})

第一次写博客，这个功能是最近接触到要使用到，参考了部分博主的思想逻辑，然后自己动手敲写出来，如若侵权，请联系删帖。文章来源地址https://www.toymoban.com/news/detail-511088.html

到了这里，关于微信小程序引用Map地图规划制定路径行走并显示路径的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！