时间戳

首页 > 解决方案 > 如何使用地理定位追踪路线？

reactjs - 如何使用地理定位追踪路线？

问题描述

我需要实现一个跟踪器，它可以获取用户的位置并在地图上实时绘制跟踪的路线，类似于strava或 runtastic 等跟踪应用程序。

在反应中，我编写了一个Tracker 组件，它使用navigator.geolocation.watchPosition并将位置推送到数组并将其保存到状态。在渲染方法中，我将此数组作为道具传递给Map 组件。

<Map coords={ this.state.coords } />

在那里，我尝试使用传递下来的道具通过添加geojson 行来显示路线，如本例所示。它看起来像这样：

componentDidMount() {
   // ...
  this.map.on("load", this.addPolyline);
}

addPolyline() {
  this.map.addSource('route', {
    "type": "geojson",
    "data": {
    "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": this.props.coords 
      }
    }
  });
  this.map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': 'red',
      'line-width': 5
    }
  });
}

...但不显示跟踪的路线。关于我做错了什么或如何实现这一点的任何建议？

标签： reactjsmapboxmapbox-gl-js

解决方案

推荐阅读