基于微信小程序地图组件实现行车轨迹

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

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

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

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

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

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

 

其中，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

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

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