基于微信小程序地图组件实现行车轨迹-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于微信小程序地图组件实现行车轨迹。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序是一款能够开发出各种功能的便捷工具，其中内置的地图组件，为我们提供了强大的地图展示和交互的能力，为我们的开发节约了不少时间和精力。同时，利用微信小程序内置的定时器，我们也能够简单地实现经纬度轨迹移动的效果。

在这个程序中，我们需要用到地图组件的polyline和marker属性。先来了解一下它们的作用：

polyline：用于在地图上展示一条折线，可以设置线条样式、颜色、粗细、折线点等属性。
marker：用于在地图上创建标记点，可以设置标记点的经纬度、图标、标签等属性。

接下来我们就可以开始介绍这个程序的实现过程了。

首先，我们需要在wxml文件中引入map组件，并设置相应的属性：

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" polyline="{{polyline}}" style="width: 100%; height: 100%;"></map>

文章来源地址https://www.toymoban.com/news/detail-770176.html

其中，longitude和latitude分别表示地图中心所在的经纬度，markers和polyline则是我们需要在地图上展示的标记点和折线的属性。

接下来，我们需要在js文件中定义相应的数据：

data: {
  longitude: 0,
  latitude: 0,
  markers: [],
  polyline: []
}

在这里，我们将地图中心的经纬度、标记点和折线数据都定义为空。

然后，我们需要在onLoad生命周期函数中获取当前用户的位置信息，并将地图中心设置为当前位置：

onLoad: function () {
  wx.getLocation({
    type: 'gcj02',
    success: res => {
      this.setData({
        longitude: res.longitude,
        latitude: res.latitude
      })
    }
  })
}

在获取到用户位置的经纬度后，我们将其设置为地图的中心点。

接下来，我们需要通过定时器，实现经纬度轨迹移动的效果。我们可以在onShow生命周期函数中设置一个定时器，每隔一段时间更新一次标记点和折线的经纬度数据：

onShow: function () {
  let index = 0;
  let timer = setInterval(() => {
    if (index < points.length) {
      let marker = [{
        id: 1,
        longitude: points[index].longitude,
        latitude: points[index].latitude,
        iconPath: '/images/icon.png',
        width: 50,
        height: 50
      }];
      let polyline = [{
        points: points.slice(0, index + 1),
        color: "#FF0000DD",
        width: 2,
        dottedLine: false
      }];
      this.setData({
        longitude: points[index].longitude,
        latitude: points[index].latitude,
        markers: marker,
        polyline: polyline
      })
      index++;
    } else {
      clearInterval(timer);
    }
  }, 1000)
}

在这段代码中，我们定义了一个points数组，用来存储一组点的经纬度数据，index变量表示当前经纬度点的索引。定时器每隔一秒钟就更新一次经纬度点的位置。我们通过更新marker和polyline的经纬度属性，来达到经纬度轨迹移动的效果。

最后，我们需要在wxml文件中引入icon图片，用于作为标记点的图标。我们可以将图片存放在images文件夹下，并设置图片宽高为30px

这样，我们就完成了利用微信小程序内置的地图组件，实现经纬度轨迹移动的程序。通过简单的设置，我们可以展示出一条折线经过一系列点的轨迹，给用户带来更好的交互体验。

最后附上实现的效果，下载地址在我的资源里

微信小程序地图获取轨迹,软件使用分享,notepad++,asp.net,后端