时间戳

首页 > 解决方案 > React Native 地图 - 渲染一个可拖动（可调整大小）的圆圈

geometry - React Native 地图 - 渲染一个可拖动（可调整大小）的圆圈

问题描述

我想知道如何将圆渲染到可拖动的 MapView 上，因为您拖动圆的外周，并且半径根据拖动方向而变化。然后至关重要的是，能够以米为单位捕获这个半径。

我什至不知道如何开始，但我可以向您展示我是如何渲染我的圆形组件的。它呈现完美，并在我移动时随我移动。

<MapView.Circle
    key = { (userPosition.longitude + userPosition.latitude).toString() }
    center = { userPosition }
    radius = { this.props.circleRadius }
    strokeWidth = { 1 }
    strokeColor = { '#1a66ff' }
    fillColor = { 'rgba(230,238,255,0.5)' }
    onRegionChangeComplete = { this.onRegionChangeComplete.bind(this) }
/>

是否存在我不知道的 MapView.Circle 属性？还是我必须为此构建自己的自定义组件？

这肯定是可能的吗？

标签： geometryreact-native-maps

解决方案

对于任何寻找自定义解决方案的人，您可以执行类似的操作：

<Marker 
    coordinate={coord}                        
    fillColor={'rgba(101,75,169,0.5)'}
    draggable
    onDragEnd={(e) => {}}
    onPress={(e) => {}}
>
    <View
        style={{
            width: 20,
            height: 20,
            backgroundColor: 'rgba(101,75,169,0.75)',
            borderRadius: 10,
            borderColor: 'black',
            borderWidth: 1
        }}
    />
</Marker

推荐阅读