Не отображается содержимое маркеров на IOS
В react-native использую rnmapbox с Mapbox.PointAnnotation, на Android маркеры отображаются корректно, на iOS нет
Код прилагаю:
import Mapbox from "@rnmapbox/maps"
import { StyleSheet, View } from "react-native"
import { Text } from "@/components/text"
export interface MarkerProps {
lon: number
lat: number
isDraggable: boolean
color?: string
content?: string | number
}
export interface MarkerLayerProps {
markers?: { [markerID: string]: MarkerProps }
onMarkerDrag?: (id: string, lon: number, lat: number, content?: string | number) => void
}
/**
* Слой с маркерами.
*/
export function MarkerLayer({ markers, onMarkerDrag }: MarkerLayerProps) {
if (!markers) return
/**
* Обновить координаты маркера после перемещения.
* @param markerID - ID маркера.
* @param content - обновить контент маркера, без этого параметра контент маркера пропадет при перетаскивании.
*/
const handleDragEnd = (e: any, markerID: string, content?: string | number) => {
if (onMarkerDrag) {
const [lon, lat] = e.geometry.coordinates
onMarkerDrag(markerID, lon, lat, content)
}
}
return (
<>
{Object.entries(markers).map(([markerID, props]) => (
<Mapbox.PointAnnotation
draggable={props.isDraggable}
onDragEnd={props.isDraggable ? e => handleDragEnd(e, markerID, props.content) : undefined}
key={markerID}
id={markerID}
coordinate={[props.lon, props.lat]}
>
<View style={[
styles.Marker,
{
backgroundColor: props.color || "#559df8",
borderColor: props.color || "white",
borderWidth: 1,
}
]}>
<Text numberOfLines={1} style={styles.MarkerText}>
{props.content}
</Text>
</View>
</Mapbox.PointAnnotation>
))}
</>
);
}
const styles = StyleSheet.create({
Marker: {
width: 25,
height: 25,
borderRadius: 25,
justifyContent: "center",
alignItems: "center",
color: 'white'
},
MarkerText: {
color: "white",
justifyContent: "center",
alignItems: "center",
textAlign: "center",
textAlignVertical: "center",
fontSize: 12,
},
})
MarkerView использовать не могу, т.к. он не поддерживает перемещение.
Вот сама карта:
export const Map = ({ lines = [], markers = {}, onMarkerDrag, onSearchResult, radius, ...props }: MapProps) => {
const initialLat = props.lat || 58.00219
const initialLon = props.lon || 56.26117
const [mapCenter, setMapCenter] = useState([initialLon, initialLat])
const mapRef = useRef<Mapbox.MapView>(null)
// Cостояние для текущего уровня зума.
const [zoomLevel, setZoomLevel] = useState<number | undefined>(11)
// Обработчик перемещения маркера (чтобы убрать зум при смене координат).
const handleMarkerDrag = (id: string, lon: number, lat: number, content?: string | number) => {
if (onMarkerDrag) {
setZoomLevel(undefined)
onMarkerDrag(id, lon, lat, content)
}
}
return (
<View style={styles.Container}>
<View style={styles.MapContainer}>
<Mapbox.MapView
ref={mapRef}
style={styles.Map}
styleURL="mapbox://styles/mapbox/streets-v12"
localizeLabels={{ locale: "ru" }}
>
<Mapbox.Camera zoomLevel={zoomLevel} centerCoordinate={mapCenter} animationMode="flyTo" />
<MarkerLayer markers={markers} onMarkerDrag={handleMarkerDrag} />
</Mapbox.MapView>
</View>
</View>
)
}
вот как отображается на Android:

