React Native RN Mapbox MarkerView未在IOS中显示

b1zrtrql  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(56)

我试图通过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的两张图片:

  1. iOS
  2. Android
    x1c 0d1x的数据


9lowa7mx

9lowa7mx1#

解决了!
坐标应该以数字的形式传递,而我将它们作为字符串传递

const position = venue?.location?.coordinates.map(Number)

字符串
应用了这个,它工作顺利

相关问题