Question

我试图在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...

Answer 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带来巨大负担

Answer 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>
      );

如何使用react-native-maps向Polygon添加标题

2 个答案: