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>

- danielbh

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,
},

例子

- Ahmed Nasser

---

只有在不缩放的情况下才有效。如果使用这种方法缩小视图，圆圈不会缩小。 - cbartondock

有没有任何解决方法来修复这个问题？如果我们放大标记，它看起来像是在地图上移动。 - FortuneCookie

Answer 2

这段代码应该有帮助。在我这里有效。

import React from "react";
import { Marker } from "react-native-maps";
import { View, Text } from "react-native";
import Pin from "../assets/Map/Pin.svg";

const CustomMarker = ({ coordinate, pinColor, value }) => {
  return (
    <Marker coordinate={coordinate} pinColor={pinColor}>
      <View
        style={{
          alignItems: "center",
        }}
      >
        <Pin width={45} height={40}></Pin>
       
        <Text
          style={{
            position: "absolute",
            color: "white",
            fontWeight: "bold",
            textAlign: "center",
            fontSize: 20,
            marginBottom: 10,
          }}
        >
          {value}
        </Text>
      </View>
    </Marker>
  );
};

export default CustomMarker;

- Shreya B

Answer 3

要在缩放时更改圆的大小，您可以在MapView的onRegionChange和onRegionChangeComplete方法中进行调整，类似于以下内容：

onRegionChange={({longitudeDelta, latitudeDelta})=>{        
     let markerSize = Math.round(((longitudeDelta + latitudeDelta) / 2) * 2500); 
     this.setState({markerSize});
}}      

然后使用标记大小作为标记的高度和宽度。

注意：将 * 2500 修改为您需要的任何大小。

- Miquel Ferrer

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>
        )
}

- Rahul Dasgupta