Question

我正在使用react-native-maps。我创建了一个包含多个标记的mapview，现在我想在单击特定标记时在mapview之外显示文本

应该是这样

这是我的代码

import React, { Component } from 'react';
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import { View, StyleSheet, Text } from 'react-native';

class FindDoctorMaps extends Component {
  constructor(props) {
    super(props);

    this.state = {
      markers: [{
        title: 'hello',
        coordinates: {
          latitude: 17.452,
          longitude: 78.3721
        },
      },
      {
        title: 'hi',
        coordinates: {
          latitude: 17.458,
          longitude: 78.3731
        },  
      },
      {
        title: 'gyp',
        coordinates: {
          latitude: 17.468,
          longitude: 78.3631
        },  
      },
      {
        title: 'nig',
        coordinates: {
          latitude: 17.568,
          longitude: 78.3831
        },  
      },
        {
          title: 'Yoy',
          coordinates: {
            latitude: 17.588,
            longitude: 78.4831
          },  
      }]
    };
  }
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'white' }} >


        <MapView
          provider={PROVIDER_GOOGLE}
          region={{
            latitude: 17.452,
            longitude: 78.3721,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
          style={styles.map}
          showsUserLocation
          followUserLocation
          showsMyLocationButton 
          showsCompass 
          zoomEnabled
        >
       {this.state.markers.map(marker => (
       <MapView.Marker 
      coordinate={marker.coordinates}
      title={marker.title}
    />
  ))}
        </MapView>
        <Text style={{ fontSize: 14, color: '#00539d', fontWeight: 'bold', margin: 20 }}>LIST VIEW</Text>

      </View>
    );   
  }
}
const styles = StyleSheet.create({
  map: {
    height: 600,
},
  SectionStyle: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderWidth: 0.5,
    borderColor: '#000',
    height: 40,
    borderRadius: 5,
    margin: 10
},
  ImageStyle: {
    padding: 10,
    margin: 5,
}
});
export default FindDoctorMaps;

有人可以帮我在mapview之外显示一些文本吗，如上图所示。

谢谢

Answer 1

经过一段时间的摸索，您可以将两个标记放在同一位置，一个标记为大头针，另一个标记为文本。

 render() {

      let markers = this.state.placesLoaded.map((item, i) => {
         return    <View key = { i }>
                      // Default marker img
                     <MapView.Marker 
                       coordinate={place.coordinates[0]}
                       title={item.name}/>
                      // Text component that you want to show
                     <MapView.Marker coordinate={place.coordinates[0]}>
                       <Text style={{top: 8}}>{item.name}</Text>
                     </MapView.Marker>
                   </View>

   return (
     <MapView>
        {markers}
     </MapView>

   )
 }

在react-native-maps中按下标记时如何在MapView之外显示文本

1 个答案: