Airbnb React Native Maps自定义标记，顶部居中文字

Question

当我说React Native Maps时，我引用了这个模块：https://github.com/airbnb/react-native-maps

如何将文本放在此标记的顶部，使其适用于ios和android上的任何屏幕尺寸？在上面的屏幕截图中，文本显示在标记的左上角。这是1。

下面的代码。谢谢你的指导！

 <MapView.Marker
  style ={{zIndex: this.state.selectedMarker === marker ? 1 : 0}}
  key={marker.id}
  image={require('../../assets/marker-with-label/marker-with-label.png')}
  coordinate={marker.coordinate}
  >
  <Text>1</Text>
</MapView.Marker>

Answer 1

我以前做过。它基本上就是我想要自定义标记时所做的事情：

<MapView.Marker  coordinate={marker.latlang}>
  <View style={styles.circle}>
     <Text style={styles.pinText}>{marker.num}</Text>
   </View></MapView.Marker>

样式

circle: {
    width: 30,
    height: 30,
    borderRadius: 30 / 2,
    backgroundColor: 'red',
},
pinText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
    fontSize: 20,
    marginBottom: 10,
},

实施例

Answer 2

要在放大或缩小时更改圆的大小，可以在MapView的onRegionChange和onRegionChangeComplete方法中进行调整，如下所示：

path

，然后使用markersize作为标记的高度和宽度。

注意：将* 2500修改为所需的大小

Answer 3

此代码应该会有所帮助。为我工作

<Typography style={{ color: "red" }} variant="h5" gutterBottom>
    <Box fontWeight={900}>JavaScript</Box>
</Typography>

Answer 4

如果要在自定义标记中添加文本，请尝试以下更新的代码：

将handlePin函数传递给<Marker>

<MapView
    style={styles.mapStyle}
    region={{
        latitude: this.state.mapLat,
        longitude: this.state.mapLong,
        latitudeDelta: 0.001663,
        longitudeDelta: 0.002001,
            }}
        onRegionChangeComplete={this.onRegionChange}
>
    <Marker
        coordinate={{latitude: 51.5078788, longitude: -0.0877321}}
    >
        {this.handlePin()}
    </Marker>
</MapView>

使用ImageBackground定义标记和<Text>定义自定义标记，并将其包装在视图中

handlePin = () =>
{
    return (
        <View>
            <ImageBackground source={require('../../assets/pin.png')} style={{height: 35, width:35 }}>
                <Text style={{paddingBottom:25}}>Hello</Text>
            </ImageBackground>
        </View>
        )
}