Googleマップでポインタをアニメーション化する方法
1819 ワード
この記事はGoogleマップ上のポインタ移動のアニメーションを表示することです.
マップ上のポインタの動きのアニメーションを行うための多くの方法があります、この記事は、反応ネイティブマップを使用することに焦点を当てています.この動画にはMapView、マーカー、AnimatedRegionを使用します.
ここでは、この記事の最後に作成します.
このアニメーションを作成するには、緯度と経度の値を持つ位置配列を使用します.
〔緯度〕20.93289777777778
我々は4秒ごとに州の位置を更新しますので、次のポインタ値を取得し、地図上にアニメーション化します.
コードサンプル
マップ上のポインタの動きのアニメーションを行うための多くの方法があります、この記事は、反応ネイティブマップを使用することに焦点を当てています.この動画にはMapView、マーカー、AnimatedRegionを使用します.
ここでは、この記事の最後に作成します.
このアニメーションを作成するには、緯度と経度の値を持つ位置配列を使用します.
〔緯度〕20.93289777777778
我々は4秒ごとに州の位置を更新しますので、次のポインタ値を取得し、地図上にアニメーション化します.
コードサンプル
const [location ,setlocation ]=useState(0);
useEffect(() => {
const interval = setInterval(() => {
getLocation()
},4000);
return () => clearInterval(interval)
})
const getLocation = () => {
console.log("get live location after 4 second")
let i=0;
var locationArray=[
{latitude:20.752219999999998,longitude:79.75849777777778},
{latitude:20.75269111111111,longitude:79.75815999999999},
{latitude:20.75293111111111,longitude:79.75798222222222},
{latitude:20.754004444444444,longitude:79.75805333333334},
]
const { latitude, longitude } =locationArray[i+1];
animate(latitude, longitude);
}
const animate = (latitude, longitude) => {
const newCoordinate = {latitude, longitude};
if(Platform.OS == 'android'){
if(markerRef.current){
markerRef.current.animateMarkerToCoordinate(newCoordinate, 7000);
}
}else{
coordinate.timing(newCoordinate).start();
}
}
完全なコードはhttps://github.com/swapnilwatkar/GoogleMap-Animation/blob/main/MapScreen.jsにありますReference
この問題について(Googleマップでポインタをアニメーション化する方法), 我々は、より多くの情報をここで見つけました https://dev.to/swapnilwatkar/google-map-animation-1haoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol