Блог

Я хочу создать карты, похожие на приложение ola/uber, с возможностью перетаскивания карты и маркером, расположенным в центре экрана, а также новыми широтой и долготой, которые будут отображаться в самом центре.

Я добился этого, имея поддельный маркер. Но положение поддельного маркера варьируется от устройства к устройству и иногда не дает нам правильного положения, тем самым давая точные координаты, так как пользователь видит, что он немного отклоняется от фактического положения.

Иногда это отклонение превышает 400 метров.

     const [latitudeDelta, setLatitudeDelta] = useState<number>(0.002);
      const [longitudeDelta, setLongitudeDelta] = useState<number>(0.002);
  const [region, setRegion] = useState({
          latitude: 32.123, //some random value
          longitude: -72.38948, //some random value
          latitudeDelta: latitudeDelta,
         longitudeDelta: longitudeDelta,
 

});

      const renderMap = () => {
    return (
      <MapView
        provider={PROVIDER_GOOGLE}
        style={{ height: mapHeight }}
        region={region}
        ref={_map}
        zoomEnabled={true}
        minZoomLevel={5}
        onRegionChangeComplete={(region) => _onRegionChangeComplete(region)}
        onDoublePress={_setMapDragging}
        onPanDrag={() => setMapDragging(true)}
      ></MapView>
    );
  };

     const renderMarker = () => {
    return (
      <View style={{left: '50%',
    marginLeft: -24,
    marginTop: -48,
    position: 'absolute',
    top: screenHeight / 3}}>
        <View style={{  backgroundColor: 'red',
    borderRadius: 10,
    height: 37,
    justifyContent: 'center',
    left: -50,
    alignItems: 'center',
    paddingLeft: 7,
    paddingRight: 8,
    marginBottom: '2%',}>
          <Text style={styles.markerText}>{string.addressSelection.MARKER_TEXT}</Text>
        </View>
        <Image style={{  height: 35,
    width: 35,
    resizeMode: 'contain',} source={FakeMarker} />
      </View>
    );
  };

      const _onRegionChangeComplete = (region: RegionObject) => {
      setRegion(region);
      setLatitude(Number(region?.latitude));
      setLongitude(Number(region?.longitude));
      //on map drag, hit the google api to get the address from lat-long
     
  };
 

Любые зацепки будут оценены по достоинству.