我最近在对本机而不是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;