React Native Maps - 如何放大按下的标记？

Question

对于我的实习，我必须创建一个带有地图视图和从 API（标准 GraphQL API）调用的标记的应用程序。但是当我点击它时我必须让地图在标记上缩放，我不明白我该怎么做。
我查找了文档，但我不明白： animateCamera(camera: Camera, {duration: number}) 但什么是相机对象？我没有。我如何调用 animateCamera ？有参考 (_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>

感谢您的帮助

PS：这是我在 Stack 上的第一个问题，请不要无礼，如果我错过了规则，请不要犹豫告诉我！ :)

PPS：为什么 Stack 会删除我每次编辑此 post 时放在开头的 'Hello'？

Answer 1

React Native Maps Marker 有一个名为 onPress 的道具，您可以使用它来检查何时单击了标记。

例如：

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

React Native Maps - 如何放大按下的标记？

React Native Maps - How do I zoom on Marker pressed?

javascript

reactjs

typescript

react-native

maps

**React Native Maps** - 如何放大按下的标记？

**React Native Maps** - How do I zoom on Marker pressed?

javascript

reactjs

typescript

react-native

maps

React Native Maps - 如何放大按下的标记？

React Native Maps - How do I zoom on Marker pressed?