Question

我正在尝试使“标记”在本机响应中可点击。例如，对于一个特定的餐厅，我想显示标记，当用户单击它时，餐厅的名称（现在可以使用），以及当用户单击餐厅的名称时，它直接显示他们的网站。只是为了它：

constructor(props){
    super(props);
    this.state = {
      name: "",
      email: "",
      region: {
        // luxembourg region
        latitude: 49.6116,
        longitude: 6.1319,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
      markers: [{
        title: 'Royal Bengal',
        coordinates: {
        latitude: 49.606259,
        longitude: 6.105683
        }}
        ]};
}

稍后显示地图：

<MapView
            style={styles.map}
            region={this.state.region}
            showUserLocation = {true}
            >
              {this.state.markers.map((marker, index) => (
                <MapView.Marker
                  key = {index}
                  coordinate = {marker.coordinates}
                  title = {marker.title}
                  // Icon =
                  // pinColor = {'#474744'}
                /> )
              )}

说我希望用户单击“皇家孟加拉”时转到google.com，该怎么办？使用onPress和其他工具查看文档并不是很有帮助。

Answer 1

<MapView.Marker
   key = {index}
   onPress={() => Linking.openURL('your-url')}
   coordinate = {marker.coordinates}
   title = {marker.title}
 />

根据react-native-maps docs，onPress事件使标记可点击。要在设备的默认浏览器中打开链接，请按照react-native docs

使用Linking.openURL（'your-url'）

可点击的Mapview标记

1 个答案: