React Native 地图，将自定义标记保留在中心

Question

所以我有一个带有自定义标记的 MapView

               <MapView
                    ref={mapRef}
                    provider={PROVIDER_GOOGLE}
                    style={{
                        width: '100%',
                        height: '100%',
                        borderRadius: 10,
                    }}
                    initialRegion={{
                        latitude: location?.coords.latitude || 1.290270,
                        longitude: location?.coords.longitude || 103.851959,
                        latitudeDelta: 0.0922,
                        longitudeDelta: 0.0421,
                    }}
                    zoomEnabled={true}
                    minZoomLevel={16}
                    maxZoomLevel={18}
                    mapType={'standard'}
                    showsBuildings={false}
                    showsTraffic={false}
                    showsIndoors={false}
                    showsPointsOfInterest={false}
                    showsIndoorLevelPicker={false}
                    customMapStyle={Theme.maps.lightMode}
                >
                    <>
                        {isEnabled && (
                            <Marker
                                key={'currentUserLocation'}
                                coordinate={{
                                    latitude: location?.coords.latitude || 1.290270,
                                    longitude: location?.coords.longitude || 103.851959,
                                }}
                                style={{zIndex: 9999}}
                            >
                                <MyProfileMarker/>
                            </Marker>
                        )}
                    </>
                </MapView>

还有一个具有自定义设计的轮廓标记：

export default function MyProfileMarker() {
    return (
        <View style={styles.container}>
            <Icon name="map-marker-outline" size={wp('9%')} color={theme.colors.danger['600']}/>
        </View>
    );
}

但是Marker没有正确放置在位置坐标中：

const styles = StyleSheet.create({
    container: {
        width: wp('80%'),
        height: wp('80%'),
        // Full circle
        borderRadius: wp('40%'),
        alignItems: 'center',
        justifyContent: 'center',
        padding: 2,
        backgroundColor: 'rgba(183,56,68,0.1)', // 'rgba(255,255,255,0.2)
    },
});

看起来像这样

作为参考，这是标记应该所在的位置，红色圆圈来自图钉

Answer 1

尝试添加这个对我有用的锚点