我试图通过expo开发构建和使用@rnmapbox/maps库开发Map功能。我有一个问题,当我构建我的应用程序时,我可以看到我在Android中创建的引脚,但在iOS中我看不到它们。
代码如下:
对于插件,我使用了以下配置:
plugins: [
[
"@rnmapbox/maps",
{
"RNMapboxMapsImpl": "mapbox",
"RNMapboxMapsDownloadToken": "MY_TOKEN"
}
]
]
字符串
我启动我的Map并放置其中一个标记的文件如下:
import MapboxGL, { Camera, MapView, MarkerView, offlineManager } from '@rnmapbox/maps';
import geoViewport from '@mapbox/geo-viewport';
MapboxGL.setWellKnownTileServer('Mapbox');
MapboxGL.setAccessToken('MY_ACCESS_TOKEN');
const CENTER_COORD = [-83.7680103841464, 9.183611130691833];
const MAPBOX_VECTOR_TILE_SIZE = 512;
const STYLE_URL = 'MY_MAPBOX_STYLE';
const MapScreen = () => {
const { width, height } = useWindowDimensions()
const camera = useRef(null);
const [packName, setPackName] = useState('pack');
const [selectedPoint, setSelectedPoint] = useState(null);
const [markerScale, setMarkerScale] = useState(0);
const mapview = useRef(null);
const marker = useRef(null);
const handlePinClick = (coordinate) => {
setSelectedPoint(coordinate);
};
const getPack = async () => {
const pack = await offlineManager.getPack(packName);
console.log('=> packs:', pack);
if (pack) {
console.log(
'pack:',
pack,
'name:',
pack.name,
'bounds:',
pack?.bounds,
'metadata',
pack?.metadata,
);
console.log('=> status', await pack?.status());
}
}
const cratePack = async () => {
const bounds = geoViewport.bounds(
CENTER_COORD,
12,
[width, height],
MAPBOX_VECTOR_TILE_SIZE,
);
const options = {
name: packName,
styleURL: STYLE_URL,
bounds: [
[bounds[0], bounds[1]],
[bounds[2], bounds[3]],
],
minZoom: 10,
maxZoom: 20,
metadata: {
whatIsThat: 'foo',
},
};
offlineManager.createPack(options, (region, status) =>
console.log(
'status: ',
status,
),
);
}
useEffect(() => {
MapboxGL.locationManager.start();
getPack();
const bounds = geoViewport.bounds(
CENTER_COORD,
12,
[width, height],
MAPBOX_VECTOR_TILE_SIZE,
);
console.log('=> bounds', bounds);
return () => {
MapboxGL.locationManager.stop();
};
}, []);
useEffect(() => {
if (camera.current) {
camera.current.setCamera({
centerCoordinate: [-83.7680103841464, 9.183611130691833],
zoomLevel: 16,
});
camera.current.flyTo([-83.7680103841464, 9.183611130691833], 2000);
setMarkerScale(1);
}
}, [camera]);
const getZoom = async () => {
const zoom = await mapview.current?.getZoom();
if (zoom <= 13) {
setMarkerScale(0); // El marcador se oculta completamente.
} else if (zoom <= 14) {
const scale = zoom - 13; // Esto dará un valor entre 0 y 0.7.
setMarkerScale(scale);
} else {
setMarkerScale(1); // Tamaño normal del marcador.
}
}
return (
<ContainerPage style={{ flex: 1, width: '100%', backgroundColor: '#ebebde' }}>
<View style={styles.page}>
{/* <Button title="Create Pack" onPress={cratePack} /> */}
<View style={[styles.container, { width: width }]}>
<MapView
style={styles.map}
ref={mapview}
styleURL='mapbox://styles/muvinai/cln3hlwst06rr01qbhqyt982l'
scaleBarEnabled={true}
// onRegionWillChange={getZoom}
onRegionIsChanging={getZoom}
>
<Camera zoomLevel={15} centerCoordinate={CENTER_COORD} />
{venueSample.map((venue, index) => {
return (
<MarkerView key={index} coordinate={venue?.location?.coordinates} allowOverlap={false}>
<TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePinClick({ coords: venue?.location?.coordinates, index: index })}>
<Image source={{ uri: venue?.icon?.url }} style={{ width: 60 * markerScale, height: 50 * markerScale }} />
<Text style={{ fontFamily: FONTS.medium, fontSize: SIZES.small * markerScale }}>{venue.name} Stage</Text>
</TouchableOpacity>
</MarkerView>
);
})}
{selectedPoint && selectedPoint.coords ?
(
<MapModal selectedPoint={selectedPoint} setSelectedPoint={setSelectedPoint} />
) : null
}
</MapView>
</View>
</View>
</ContainerPage>
);
};
型
问题是,当我按下大头针时,我也使用了一个模态。我尝试使用点注解,但效果不好(因为模态被我Map中的点覆盖)。我在iOS和Android中发送了一个截图。
任何关于如何推进这个问题的建议,欢迎,更正或改进我的代码也!
以下是Map的两张图片:
- iOS
- Android
x1c 0d1x的数据
的
1条答案
按热度按时间9lowa7mx1#
解决了!
坐标应该以数字的形式传递,而我将它们作为字符串传递
字符串
应用了这个,它工作顺利