在地图视图标记内显示一个按钮？

Question

我目前正在使用 airbnb 地图模块开发一个 React Native 应用程序。

我的地图包含几个标记，我可以单击这些标记打开MapView 组件。它包含标题和描述。

我想给这个MapView 添加一个按钮，但是the solution that I found 不起作用。我这样自定义它（这是我的 googlemap 组件中的 return 部分：

return(
  <View style={styles.container}>

    <MapView
      style={styles.map}
      provider={PROVIDER_GOOGLE}
      customMapStyle={mapStyle}
      initialRegion={{
        latitude: 48.852968,
        longitude: 2.349902,
        latitudeDelta: 0.1,
        longitudeDelta: 0.1
      }}
    >
      <MapView.Marker
        coordinate={{
          latitude: 48.852968,
          longitude: 2.349902
        }}
          title={ 'myTitle' }
          description={ 'myDescription' }
          pinColor={ 'blue' }
          onCalloutPress={() => alert('Clicked')}
      >
        <MapView.Callout>
          <View>
            <Text>Click Me!</Text>
          </View>
        </MapView.Callout>
      </MapView.Marker>

    </MapView>

  </View>
);

我想要的： 1- 在地图上显示我的蓝色标记（使用 lat 和 lng） 2-单击标记 3- 有一个带有标题、描述和“点击我！”的小弹出窗口按钮 4- 以console.log 的身份获得“点击”

会发生什么： 1- 在地图上显示我的蓝色标记（使用 lat 和 lng） 2-单击标记 3-有一个小弹出“点击我！”按钮（更像是一个蓝色链接，但我不知道它应该如何呈现） 4- 我的控制台中没有“点击”

此功能是否已被弃用？还是我做错了什么？我遵循了解决方案和文档，但也许我错过了一些东西。

Answer 1

从您的按钮中删除 onPress 并将其添加到标记（参见 pincolor 后），再次尝试单击该按钮。

<MapView.Marker
    coordinate={{
        latitude: myLat,
        longitude: myLng
    }}
    title={ 'myTitle' }
    description={ 'myDescription' }
    pinColor={ 'blue' }
    onCalloutPress={() => alert('Clicked')}
>
    <MapView.Callout>
        <View>
            <Text>Click Me!</Text>
        </View>
    </MapView.Callout>
</MapView.Marker>

这对我有用。希望这对你也有帮助:)

Answer 2

将 zIndex 应用于您的按钮，它将显示在您的地图视图中