1

[在此处输入图片描述][1]我正在使用谷歌地图 API 开发适用于 Android 和 IOS 的实时跟踪应用程序，我使用的技术是 React 本机。我可以使用数组地图方法列出多个地图，但并非所有地图路线都在框架内，只有最后一张地图适合框架视图，因为mapRef它被覆盖了。如何更新mapRef而不是覆盖。

const mapRef = useRef();
useEffect(() => {
  screen();
}, [dataSource]);

const screen = () => {
trips = dataSource.map((val, key) =>  {
 let origin = val.route_origin;
    let ori = " "+origin;
    let destination = val.route_destination;
    let dest = " "+destination;
    let newDate = val.trip_date;
    {console.log("newdate:",newDate)}
    var trip_date = moment(newDate).format('DD/MM/YYYY');
    let trip_time = val.trip_time;
           <MapView
                style={styles.maps}
                initialRegion={{
                  latitude: 13.3379,
                  longitude: 77.1173,
                  latitudeDelta: 0.0922,
                  longitudeDelta: 0.0421,
                }}
                ref={mapRef}  // **mapRef is the issue here,it is getting overwritten so fitTocoordinates is updating only for the last mapView**
                zoomEnabled={true}
              >
                 <MapView.Marker
                  pinColor={"green"}
                  coordinate={{
                    latitude: 12.9716,
                    longitude:77.5946,
                  }}
                ></MapView.Marker>

               <MapViewDirections
                  origin={ori}
                  destination={dest}
                  apikey={"*******************************"} // insert your API Key here
                  strokeWidth={3}
                  strokeColor="hotpink"  
                  optimizeWaypoints={true}
                  onReady={(result) => {

                    mapRef.current.fitToCoordinates(result.coordinates, {
                      mapPadding: {
                        right: Dimensions.get("window").width / 40,
                        bottom: Dimensions.get("window").height / 70,
                        left: Dimensions.get("window").width / 40,
                        top: Dimensions.get("window").height / 70,
                      },
                    });
                  }}
                />
              </MapView>
})}
 console.log("tripsarr",trips);
  settrip1(trips);```


[1]: https://i.stack.imgur.com/5TWr3.png
4

0 回答 0