React Native Map：如何使折线坐标适合屏幕？

Question

我正在使用反应本机地图，我使用折线和标记，但是当我显示折线来映射它时，它不适合屏幕，它只显示屏幕中线的某些部分，其他我必须滚动然后我看到，所以如何适应折线协调在当前屏幕内。

但我想让折线看起来像这样。那我该怎么做

这是我的代码。

 <MapView
                  

style={styles.mapStyle}
                 provider={PROVIDER_GOOGLE}
                 minZoomLevel={0}
                 paddingAdjustmentBehavior="automatic"
                 ref={(ref) => {
                   this.mapRef = ref;
                 }}
                 onLayout={() =>
                   this.mapRef.fitToCoordinates(this.state.cord, {
                     edgePadding: {top: 50, right: 10, bottom: 10, left: 10},
                     animated: false,
                   })
                 }
                 onMapReady={this.onMapReadyHandler.bind(this)}
                 
                 showsUserLocation={true}
                 fitToElements={true}
                 region={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}
                 initialRegion={{
                   latitude: this.state.start[0],
                   longitude: this.state.start[1],
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421,
                 }}>
                 <Circle
                   center={{
                     latitude: this.state.start[0],
                     longitude: this.state.start[1],
                   }}
                   radius={40}
                   strokeColor={'blue'}
                   strokeWidth={6}
                   fillColor={'#fff'}
                   zIndex={1}
                 />

                
                  {speed.map((d) =>
                    d.segments.map((c, i) => (
                      <Polyline
                        key={i}
                        coordinates={c.coordinates.map((c) => ({
                          latitude: c[0],
                          longitude: c[1],
                        }))}
                        strokeColor={c.color}
                        strokeWidth={6}></Polyline>
                    )),
                  )}
                </MapView>

提前致谢

Answer 1

试试这个，它对我有用 https://www.npmjs.com/package/react-native-maps-directions

Answer 2

您的问题有一个解决方案。您必须对位置数据集进行平均。

这是示例代码。

let coords=[{latitude:28.97979,longitude:73.386429864}, {latitude:28.32243,longitude:73.329437204}, {latitude:28.244234,longitude:73.32482894}, {latitude:28.686976,longitude:73.2342056}, {latitude:28.23325235,longitude:73.83562325}];

let sumLat = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.latitude)}, 0);
let sumLong = coords.reduce((a, c) => { return parseFloat(a) + parseFloat(c.longitude)}, 0);
   
let avgLat = (sumLat / coords.length) || 0;
let avgLong = (sumLong / coords.length) || 0; 

setRegion({
        latitude: parseFloat(avgLat),
        longitude: avgLong,
        latitudeDelta: 0.20,
        longitudeDelta: 0.20,
      });