javascript - react native map : How to fit Polyline coordinates to screen?

Question

我正在使用 react native map 并且我使用了折线和标记但是当我显示折线来映射它时它不适合屏幕它只显示屏幕中的一部分线其他我必须滚动然后我看到，所以如何适合当前屏幕内的折线坐标。

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

这是我的代码。

 <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

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

这是示例代码。

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,
      });