React native 使用Google API坐标在react原生地图上添加多条多段线

我想在react native中的Google地图上放置多条多段线。我正在使用react native maps和@mapbox/polyline创建我在顶部导入的多段线：

import MapView from 'react-native-maps';
import Polyline from '@mapbox/polyline';

以下是代码的其余部分：

import {
  Marker
} from 'react-native-maps';

import React, { Component } from 'react';
import {
   Platform,
   StyleSheet,
   Text,
   View,
   Button
 } from 'react-native';

 export default class consults extends Component {
  constructor(props) {
  super(props);
  this.state = {
    coords: []
  }
 }

componentDidMount() {
   this.getDirections("55.23607109335242, 10.478553771972656", "55.178279530181264, 10.525074005126953");
   this.getDirections("55.067434, 10.607282", "55.093088, 10.588734");
 }

 async getDirections(startLoc, destinationLoc) {

   try {
       let resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${ startLoc }&destination=${ destinationLoc }&mode=${'walking'}`)
       let respJson = await resp.json();
       let points = Polyline.decode(respJson.routes[0].overview_polyline.points);

       let coords = points.map((point, index) => {
           return  {
               latitude : point[0],
               longitude : point[1]
           }
       })


       this.setState({coords: coords})
       return coords
   } catch(error) {
       alert(error)
       return error
   }
}


static navigationOptions = {
title: 'Kort over stier'
};

render () {
 const { navigate } = this.props.navigation;
 const { region } = this.props;
 console.log(region);

 return (
   <View style ={styles.container}>
    <MapView
      style={styles.map}
      region={{
        latitude: 55.0598,
        longitude: 10.6068,
        latitudeDelta: 0.40,
        longitudeDelta: 0.40,
      }}
    >

    <MapView.Polyline
        coordinates={this.state.coords}
        strokeWidth={2}
        strokeColor="red"/>

    </MapView>
  </View>
 )
}

}

const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},

});

当我请求两个时，我得到最后一个的坐标。有人知道如何在同一张地图上绘制多条多段线吗？提前，谢谢：-）

更新 从另一个stakoverflow问题中查找此示例图片。我想要相同但没有标记的：

---

您是否尝试过存储多段线数组？必须对组件进行一些更改，顺便说一句：

...
constructor(props) {
    super(props)
    this.state = { coordsArray: [] }
}
...
async getDirections(startLoc, destinationLoc) {
    ...
    const newCoordsArray = [ ...this.state.coordsArray, coords]
    this.setState({ coordsArray: newCoordsArray })
    ...
}
...

对于渲染方法：

render () {
 const { navigate } = this.props.navigation;
 const { region } = this.props;

 return (
   <View style ={styles.container}>
    <MapView
      style={styles.map}
      region={{
        latitude: 55.0598,
        longitude: 10.6068,
        latitudeDelta: 0.40,
        longitudeDelta: 0.40,
      }}
    >
    {this.state.coordsArray.map((coords, index) => 
      <MapView.Polyline
        index={index}
        coordinates={coords}
        strokeWidth={2}
        strokeColor="red"/>
    }
    </MapView>
  </View>
 )
}

render（）{
const{navigate}=this.props.navigation；
const{region}=this.props；
返回(
{this.state.coordsArray.map（（coords，index）=>
}
)
}

我刚刚实现了您编写的内容，但它只编写了一条多段线，这是最后一条。还有其他建议吗？：-）现在它开始工作了。coordsArray需要包含一个带有坐标的obejcts数组og数组。感谢您的帮助：-）组件看起来不会基于监视来维护状态，如果您正在运行地理位置监视功能，它似乎在功能控制之外运行，如果您调用或推送到状态，它将不知道。

render () {
 const { navigate } = this.props.navigation;
 const { region } = this.props;

 return (
   <View style ={styles.container}>
    <MapView
      style={styles.map}
      region={{
        latitude: 55.0598,
        longitude: 10.6068,
        latitudeDelta: 0.40,
        longitudeDelta: 0.40,
      }}
    >
    {this.state.coordsArray.map((coords, index) => 
      <MapView.Polyline
        index={index}
        coordinates={coords}
        strokeWidth={2}
        strokeColor="red"/>
    }
    </MapView>
  </View>
 )
}