React-Native-Maps 如何从数组列表中绘制折线？答案

【问题标题】：React-Native-Maps how to draw polylines From Array List?React-Native-Maps 如何从数组列表中绘制折线？
【发布时间】：2021-03-08 18:07:37
【问题描述】：

我已经开始使用https://github.com/airbnb/react-native-maps 并且没有运气从地图上的数组坐标数组中绘制折线。

我不确定我是否正确传递了坐标数组。

这就是我渲染折线的方式：

这里是包含坐标的 api 链接：https://run.mocky.io/v3/e42d76ce-2ac8-4199-9f2c-e5b611960d38

我有这样的代码。

 <MapView
            style={styles.mapStyle}
            provider={PROVIDER_GOOGLE}
            minZoomLevel={0}
            showsTraffic={false}
            showsBuildings={true}
            followUserLocation={false}
            loadingEnabled={true}
            showsUserLocation={true}
            loadingIndicatorColor={'green'}
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
            zoomEnabled={true}
            showsUserLocation={true}>
              {
                
                
              speed.map((d) =>
              d.segments.map((c) => (
                <Polyline
                  coordinates={c.coordinate}
                  strokeColor="#000" the map-provider
         
                  strokeWidth={6}>
                  <Marker
                    coordinate={{latitude: 37.8025259, longitude: -122.4351431}}
                    title="Flatiron School Atlanta"
                    description="This is where the magic happens!"></Marker>
                </Polyline>
              )),
            )}
          </MapView>

我有这样的坐标，

{"coordinates":[[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867],[43.43522206128157,-79.73892179139867]]}

感谢您的帮助

【问题讨论】：

标签： javascript reactjs react-native react-native-android react-native-maps

【解决方案1】：

Polyline 中的坐标是一个 LatLng 数组

type LatLng { 纬度：数字，经度：数字，}

所以这样的事情应该可以工作：

d.segments.map((c) => 
    <Polyline
      coordinates={c.coordinates.map(c => ({latitude: c[0], longitude: c[1]}))}
      strokeColor="#000"
      strokeWidth={6}>
    </Polyline>
)

【讨论】：