如何在 Airbnb 地图中显示标注？

Question

我有一个带有一个标记的静态地图，并希望始终显示标记标注。

有些人建议使用MapView 的onLayout，但这暂时不起作用。

我正在尝试使用 onRegionChangeComplete 解决它，它有时会起作用（它会被调用一次或两次），但在大约 10% 的情况下，它会陷入循环并被一次又一次地调用，直到应用程序崩溃。这只发生在 iOS 上。

这是我的代码

setMarkerRef = (ref) => {
  this.marker = ref
}

showCallout = () => {
  this.marker.showCallout()
}

render() {

...

  <MapView
    style={{...StyleSheet.absoluteFillObject}}
    region={{
      latitude: latitude,
      longitude: longitude,
      latitudeDelta: 0.00922,
      longitudeDelta: 0.00421,
    }}
    showsMyLocationButton={false}
    showsCompass={false}
    showsTraffic={false}
    zoomEnabled={false}
    rotateEnabled={false}
    scrollEnabled={false}
    pitchEnabled={false}
    onRegionChangeComplete={this.showCallout}
    onPress={this.openMap}
  >
    <MapView.Marker
      coordinate={{
        latitude: latitude,
        longitude: longitude,
      }}
      title={address}
      ref={this.setMarkerRef}
    />
  </MapView>

知道我的方法有什么问题吗？有没有人有更好的解决方法？

编辑：我希望组件看起来像这样，而不需要用户交互。只需显示地图、标记和标注。

Answer 1

由于您正在渲染固定地图，没有预期的区域更改，因此您无需收听regionChangeComplete。这真的不是一个有趣的事件，因为它的行为不是那么一致。

initialRegion 可用于显示您的地图。或者，如果您想要更精美的动画，请尝试使用 MapView animateToRegion。

不管怎样，你只需要听componentDidMount。

我怀疑你的 refs 代码可能是错误的，但无论如何这对我有用。

componentDidMount () {
  this.refs['mymarker'].showCallout()
}

render () {
  return (
    <MapView>
      <MapView.Marker
        coordinate={YOUR_COORDINATES}
        title='my callout'
        ref='mymarker'>
      </MapView.Marker>
    </MapView>
  )
}

如果您仍有问题，可能是您在 MapView.Marker 中的 title 属性没有收到您在调用 showCallout 时传入的 address。在这种情况下，调用不会呈现。

更新的答案：（似乎上述不适用于Apple Maps）

render () {
  return (
    <MapView
      onLayout={() => this.refs["mymarker"].showCallout()}>
      <MapView.Marker
        coordinate={YOUR_COORDINATES}
        title='my callout'
        ref='mymarker'>
      </MapView.Marker>
    </MapView>
  )
}