如何使用 react-native-maps 向多边形添加标题答案

【问题标题】：How to add title to Polygon using react-native-maps如何使用 react-native-maps 向多边形添加标题
【发布时间】：2019-08-29 16:22:35
【问题描述】：

我正在尝试在 MapView 中绘制特定的多边形，但我不确定如何为 Polygon 添加标题。

我试图搜索官方文档，但只有 Marker 有 title 属性，所以我不确定它是否支持。

标记可以像这样使用

<Marker
    coordinate={latittude: x, longitude: y}
    title="I am Marker"
/>

那么是否可以像这样向 Polygon 添加 title 属性：

<Polygon
    coordinates=[{latittude: x, longitude: y},...]
    title="I am Polygon"
/>

???Expecting something like this...

【问题讨论】：

标签： react-native react-native-maps

【解决方案1】：

我认为您没有其他选择，但您可以使用非常好用的标记。

<MapView.Marker key={`${key}Marker`} coordinate={center} anchor={centerAnchor} tracksViewChanges={false}>
    <Text key={`${key}Text`} style={styles.clusterText}>
        {data.properties.n}
    </Text>
</MapView.Marker>

不要忘记tracksViewChanges={false}，否则地图会因为许多标记而疯狂并给cpu带来巨大的负载

【讨论】：

【解决方案2】：

我也遇到了同样的问题，我知道这已经晚了，但这就是我所做的。我也不知道反应原生地图现在是否有这种方法。所以作为替代，我使用Marker 作为标题。并使用来自 github 的 function 获取多边形的中心。

center_polygon(coordinates) {
    let x = coordinates.map(c => c.latitude);
    let y = coordinates.map(c => c.longitude);

    let minX = Math.min.apply(null, x);
    let maxX = Math.max.apply(null, x);

    let minY = Math.min.apply(null, y);
    let maxY = Math.max.apply(null, y);

    return {
      latitude: (minX + maxX) / 2,
      longitude: (minY + maxY) / 2
    };
  }

多边形

return (
        <View>
          <Marker 
            coordinate={polygon_center}  
          >
            <Text note style={{color:"#000", fontSize: 9}}>
              {name}
            </Text>
          </Marker>
          <Polygon
            key={index}
            coordinates={fixed_coordinates}
            fillColor={this.hexToRgbA(color, 0.4)}
            strokeColor={color}
            strokeWidth={3}
          >

          </Polygon>
        </View>
      );

【讨论】：

是的。我这样做了，但我遇到了另一个问题。如果您有 L 形多边形，则标记不在多边形内。但我停止使用谷歌地图并开始使用 react-map-gl。它的性能要好得多，并且有很多方法可以完全免费使用它。不管怎样，谢谢你的建议；）