React Native在地图上绘制圆形。

Question

这可能很简单，但在网上没有任何人提供如何实际执行的示例，我就是无法让它运作起来。

这是我的render()函数，我应该只需要做这个吗? :

render() {
    return (
    <MapContainer>
        <MapView.Circle
            center = {{ latitude: this.state.currentLatitude || 30, longitude: this.state.currentLongitude || 120 }}
            radius = { 1000 }
            strokeColor = "#4F6D7A"
            strokeWidth = { 2 }
        />
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        </MapView>
        <MessageBar />           
    </MapContainer>
    )
}

我尝试将MapView.Circle标签放在MapView标签之上或之下，但没有任何不同。有人成功实现了吗？

- Bisclavret

---

我问错了吗？难道没有人理解我想做什么吗？我不确定为什么没有人帮助我。也没有人知道如何在地图上渲染一个圆形吗？ - Bisclavret

Answer 1

以下是可供其他遇到类似问题的人使用的有效代码：

RADIUS = 500;

class Map extends Component {

state = {
    mapRegion: null,
    currentLatitude: null,
    currentLongitude: null,
    LATLNG: {
        latitude: -35
        longitude: 120
    },
}

render() {
    return (
    <MapContainer>
        <MapView 
            style = { styles.map }
            region = { this.state.mapRegion }
            showsUserLocation = { true }
            followUserLocation = { true }
            onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }>
        <MapView.Circle
                key = { (this.state.currentLongitude + this.state.currentLongitude).toString() }
                center = { this.state.LATLNG }
                radius = { RADIUS }
                strokeWidth = { 1 }
                strokeColor = { '#1a66ff' }
                fillColor = { 'rgba(230,238,255,0.5)' }
                onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
        />
        </MapView>
        <MessageBar />           
    </MapContainer>
    )
}

- Bisclavret

---

请提供完整的代码，包括样式和MapContainer。 - Vinay N

请问半径的单位是什么？公里还是米？ - Wai Yan Hein

Answer 2

非常感谢您！这节省了我很多时间。 我在向MapView中添加组件时也遇到了问题。 以下是我想出的解决方法。（仅供需要的人参考）

<View style={styles.container} >
  <MapView
      style={styles.map}
      initialRegion={{
        latitude: -29.1482491,
        longitude: -51.1559028,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}>
      <MapView.Circle
        center={{
          latitude: -29.1471337,
          longitude: -51.148951,
        }}
        radius={20}
        strokeWidth={2}
        strokeColor="#3399ff"
        fillColor="#80bfff"
      />
  </MapView>
  <View style={styles.allNonMapThings}>
      <View style={styles.inputContainer}>
        <TextInput
          placeholder=" Type some stuff!"
          style={ styles.input }
          keyboardType="numeric"
        />
      </View>

      <View style={styles.button} >
        <TouchableOpacity > 
          <Text style = {styles.buttonText} >
            Search
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  </View>

- ahcorso