对于我的实习,我必须创建一个应用程序与地图视图和标记从API(标准GraphQL API)调用。但是当我点击地图时,我必须让它在标记上缩放,我不明白我怎么能做到这一点。
我找了文档,但我不明白:animateCamera(camera: Camera, {duration: number})
但是什么是相机对象呢?我没有。我怎么调用animateCamera ?使用ref (_mapRef.current.animateCamera) ?
<MapView
style={styles.map}
mapType={viewType}
provider='google'
ref={_map}
>
{users !== undefined && users.map((item, index) => (
<Marker
key={'user_' + index}
title={item.username}
description={item.posts.data.length + ' posts'}
coordinate={{
latitude: item.address.geo.lat,
longitude: item.address.geo.lng
}}
onCalloutPress={() => {
navigation.navigate('SingleUser', {user: item})
}}
/>
))}
</MapView>
Thanks for the help
PS:这是我在Stack上的第一个问题,如果我错过了一个规则,请不要粗鲁,不要犹豫告诉我!:)
PPS:为什么每次我编辑这篇文章时Stack都会删除我放在开头的"Hello"?
React Native Maps Marker有一个名为onPress的道具,你可以用它来检查何时点击了Marker
例如:
<Marker
key={'user_' + index}
title={item.username}
description={item.posts.data.length + ' posts'}
coordinate={{
latitude: item.address.geo.lat,
longitude: item.address.geo.lng
}}
onCalloutPress={() => {
navigation.navigate('SingleUser', {user: item})
}}
onPress={this.onMarkerClicked}
/>
创建onMarkerClicked函数
onMarkerClicked = () => {
_map?.current?.getCamera().then((camera) => {
camera.zoom += 1;
map?.current?.animateCamera(camera);
});
相机对象默认用于跟踪以下属性
export interface Camera {
center: LatLng;
heading: number;
pitch: number;
zoom: number;
altitude: number;
}