获取Mapbox中两个点之间的路线?

时间:2019-12-09 19:23:35

标签: javascript react-native mapbox mapbox-gl-js mapbox-android

我最近在对本机而不是Google地图使用了mapbox gl时, 我正在尝试添加一个在地图上显示从A点到B点的方向的功能。

或在我的React Native App中使用Mapbox directions API

这是我尝试的代码,但在安装屏幕后,应用程序成功崩溃:D

import MapboxGL from '@react-native-mapbox-gl/maps';
import React from 'react';
import {View} from 'react-native';

MapboxGL.setAccessToken(
  '....',
);

class TwoPoints extends React.Component {
  constructor(props) {
    super(props);

    this.featureCollection = {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'example',
          },
          geometry: {
            type: 'Point',
            coordinates: [-73.989, 40.733],
          },
        },
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'airport-15',
          },
          geometry: {
            type: 'Point',
            coordinates: [-74, 40.733],
          },
        },
        {
          type: 'Feature',
          id: '9d10456e-bdda-4aa9-9269-04c1667d4552',
          properties: {
            icon: 'pin',
          },
          geometry: {
            type: 'Point',
            coordinates: [-74, 40.733],
          },
        },
      ],
    };
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <MapboxGL.MapView
          ref={c => (this._map = c)}
          zoomEnabled={true}
          style={{flex: 1}}>
          <MapboxGL.ShapeSource shape={this.featureCollection}>
            <MapboxGL.SymbolLayer
              style={{iconColor: 'red'}}
              minZoomLevel={25}
            />
          </MapboxGL.ShapeSource>
        </MapboxGL.MapView>
      </View>
    );
  }
}
export default TwoPoints;

0 个答案:

没有答案