Airbnb React Native Maps 自定义标记，顶部居中文本答案

【问题标题】：Airbnb React Native Maps custom marker with centered text on topAirbnb React Native Maps 自定义标记，顶部居中文本
【发布时间】：2016-11-26 19:15:45
【问题描述】：

当我说 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>

【问题讨论】：

标签： react-native maps

【解决方案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,
},

例子

【讨论】：

这仅在您不缩放时有效。如果使用这种方法缩小，圆圈不会缩小。
有什么办法可以解决这个问题吗？如果我们放大标记，看起来就像在地图上移动一样。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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;

【讨论】：

【解决方案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>
        )
}

【讨论】：