概括
我正在使用并react-native-map嘗試同時使用兩者，但根本無法制作影片。animateCameraanimateMarkerToCoordinateanimateCamera
到目前為止的作業部分
我在下面分享的 gif 圖中的“紅色圓圈”應該是通過影片從一個位置移動到另一個位置。我利用這條評論能夠移動標記，將代碼轉換為功能組件，并且它確實有效。 移動標記 gif
我的目標
我希望相機在標記之外也移動，這樣紅色圓圈應該總是感覺就像它在手機螢屏的中心。當我按下下面的“影片”按鈕時，所有這些都應該發生。
我試圖對地圖視圖做同樣的事情，就像我對標記所做的那樣。
我創建了一個狀態
const [mapRef, setMapRef] = useState(null);
并使用以下行開始提供<MapView>和狀態之間的連接mapRefref
return (
<View style={...}>
<MapView
ref= {mapRef => {setMapRef(mapRef);}}
initialRegion = {
...
}
...
/>
因此，當按下按鈕時，它會進入此功能并嘗試animateCamera作業
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
let Camera = {
...
}
if (myMarker) {
myMarker.animateMarkerToCoordinate(newCoordinate, 4000);
mapRef.animateCamera({Camera}, 4000)
}
}
順便Camera調整一下，就像檔案中提到的那樣
let Camera = {
center: {
latitude: newCoordinate.latitude,
longitude: newCoordinate.longitude,
},
pitch: 2,
heading: 20,
zoom: 40
}
所以我期待它像標記影片一樣影片，但不起作用。
請告訴我我的錯。
完整代碼...
import React, {useState} from 'react'
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import MapView, { AnimatedRegion, MarkerAnimated } from 'react-native-maps';
const PlayScreen = (props) => {
const [myMarker, setMyMarker] = useState(null);
const [mapRef, setMapRef] = useState(null);
const [coordinate, setCoordinate] = useState(new AnimatedRegion({
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta:0.012,
}));
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
if(myMarker){
myMarker.animateMarkerToCoordinate(newCoordinate,4000);
mapRef.animateCamera(newCoordinate, 4000);
}
}
return (
<View style={styles.container}>
<MapView
ref= {mapRef => {setMapRef(mapRef);}}
style={styles.map}
initialRegion={{
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
>
<MarkerAnimated
ref={marker => {
setMyMarker(marker);
}}
image={require('../../../Assets/Images/curlingStone.png')}
coordinate={coordinate}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => animateMarkerAndCamera()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
bubble: {
flex: 1,
backgroundColor: 'rgba(255,255,255,0.7)',
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
latlng: {
width: 200,
alignItems: 'stretch',
},
button: {
width: 80,
paddingHorizontal: 12,
alignItems: 'center',
marginHorizontal: 10,
},
buttonContainer: {
flexDirection: 'row',
marginVertical: 20,
backgroundColor: 'transparent',
},
});
export default PlayScreen
uj5u.com熱心網友回復：
所以，正如我之前解釋過的，我試圖將animateCamera和animateMarkerToCoordinate一起使用，以便感覺我的標記，紅色圓圈，總是在中心，只有坐標似乎在變化。
經過一番研究，我發現了這一點并使我的代碼與此代碼相似。現在我得到了我想要達到的目標。GIF 在這里
我所做的更改被寫為評論
代碼如下
import {useState, useRef} from 'react'
import ... //same as before
const PlayScreen = (props) => {
const markerLatitude=32.5983
const markerLongitude=44.0175
//changed from useState to useRef
const mapRef = useRef (null);
const [myMarker, setMyMarker] = useState(null);
const [coordinate, setCoordinate] = useState(new AnimatedRegion({
latitude: markerLatitude,
longitude: markerLongitude,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}));
function animateMarkerAndCamera() {
let newCoordinate = {
latitude: 32.601,
longitude: 44.0172,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
};
//camera will position itself to these coordinates.
const newCamera= {
center: {
latitude: 32.601,
longitude: 44.0172,
},
pitch: 0,
heading: 0,
//zoom: 17 --Use it when required
}
if (myMarker) {
myMarker.animateMarkerToCoordinate(newCoordinate, 4000);
//camera type, `newCamera`, used inside animateCamera
mapRef.current.animateCamera(newCamera, {duration: 4000})
}
}
return (
<View style={styles.container}>
<MapView
ref={ mapRef } //There is also change here
style={styles.map}
initialRegion={{
latitude: 32.5983,
longitude: 44.0175,
latitudeDelta: 0.012,
longitudeDelta: 0.012,
}}
//These are newly added
pitchEnabled ={false}
zoomEnabled ={false}
>
<MarkerAnimated
ref={marker => {
setMyMarker(marker);
}}
{/*any kind of image can be replaced here */}
image={require('../../../Assets/Images/curlingStone.png')}
coordinate={coordinate}
/>
</MapView>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={() => animateMarkerAndCamera()}
style={[styles.bubble, styles.button]}
>
<Text>Animate</Text>
</TouchableOpacity>
</View>
</View>
);
}
export default PlayScreen
const styles = StyleSheet.create({ ... //same as before
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/472002.html
上一篇：帶間隔的進度條