show on the map the markers and draw a line between one marker and another(with Polyline)

Viewed 18

hi everyone i'm doing a project and i have a problem in react-native with a piece of code. I have the station status which contains a list of stations that I want to mark (with markers) on the map. How do I use Polyline between one marker and another?

export default class Map extends Component {
    constructor(){
        super();
        this.state=stations:
 [{"lat": "45.43331", "lon": "9.241"}, 
{"lat": "45.4643", "lon": "9.2387"}, 
{"lat": "45.4847", "lon": "9.23688"}, 
{"lat": "45.47669", "lon": "9.23217"}]
}
 render(){
return(
        <View style={styles.container}>
 <MapView style={styles.map}
 onRegionChange={this.handleRegionChanged}
 initialRegion={{
 latitude: 45.6835,
 longitude: 8.7035,
 latitudeDelta: 1,
 longitudeDelta: 1,
 }}>
      <View style={{ position: 'absolute', top: 100, left: 50 }}/>
      {this.state.stations.map((marker,item) => (
    <MapView.Marker 
    key={item}
    coordinate={{
        latitude: Number(marker.lat),
        longitude: Number(marker.lon)}}
      title={marker.sname}
    />
    ))}
//this is my problems
     {this.state.stations.map((marker,item) => (
    <MapView.Polyline
    key={item}
       coordinates={[{latitude:Number(marker.lat),longitude:Number(marker.lon)}]}
       strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
        strokeColors={[
            '#7F0000',
            '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
            '#B24112',
            '#E5845C',
            '#238C23',
            '#7F0000'
        ]}
        strokeWidth={4}
        />
        ))} 
  </MapView>
 </View>  
)}
}
}

my code prints the markers correctly but does not draw the lines between one marker and another (with polynes). How can I show on the map the markers corresponding to the stations and draw a line between one marker and another (with Polyline)?

0 Answers
Related