Jak centrum MapView na aktuální polohy uživatele, když se Obrazovka Mapa je otevřel? Reagovat Native Expo

Question 1

Jak vycentrovat mapu ukázat aktuální polohy uživatele, když se obrazovka mapa je otevřel? Po expo dokumentaci, mělo by být dosaženo s Expo Umístění API? Nicméně, v dokumentaci je nejasný. Vzal jsem část kódu z expo Umístění dokumentace a realizována v mé Mapě Obrazovce. Tak, jak by měla integrovat to v MapView k provedení getCurrentPositionAsync metoda a centrum na mapě, tedy, když se obrazovka mapa je otevřel?

import React, { useContext, useState, useEffect } from "react";
import MapView from "react-native-maps";
import styled from "styled-components";
import { Searchbar } from "react-native-paper";
import { View } from "react-native";

import * as Location from 'expo-location';

const Map = styled(MapView)`
height: 100%;
width: 100%;
`;

const SearchBarContainer= styled(View)`
padding: ${(props) => props.theme.space[3]};
position: absolute;
z-index: 999;
top: 20px;
width: 100%;
`;

export const MapScreen = ({navigation}) => {

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  return (
    <> 
    <SearchBarContainer>
      <Searchbar placeholder="location"/>
    </SearchBarContainer>
    <Map showsUserLocation={true}>
      
    </Map>
    </>
  );};

Question 2

Byl jsem potýkají s tímto problémem na pár dní stejně a připadá mi to velmi divné, že i když expo MapView můžete zobrazit vlastní polohu na mapě, to nelze vrátit své vlastní coördinates.

I přes to, že problém může být stanovena s následující řešení.

Instalace Expo-umístění

expo nainstalovat expo-umístění

Importovat

import * as Location from 'expo-location'

Vytvoření státu

const [location, setLocation] = useState({});

Vytvořit useEffect funkci, která načte váš coördinates asynchronní (vyhledávání umístění na tlačítko tisk může trvat až 5-10 sekund, což je směšně pozdě, pokud jde o uživatelské zkušenosti)

useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                return;
            }

            let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
            });
            setLocation(location);
        })();
    }, []);

Vaše Mapview musí mít referenční mluvit do MapView a nastavit je coördinates.

<MapView ref={mapRef}>.... </MapView>

const mapRef = React.createRef();

A nakonec vytvořte funkci, která může být vyvolána vlastní tlačítko na střed na umístění uživatele.

const goToMyLocation = async () => {
        mapRef.current.animateCamera({center: {"latitude":location.coords.latitude, "longitude": location.coords.longitude}});
}

Question 3

Budete muset projít uživatelské souřadnice poskytována Expo umístění api do vašich map součást nezbytného ukázat aktuální Polohu, také musíte nastavit počáteční stav pro svou polohu (lat,lng) takto a budete-li hledat vyšší přesnost bych doporučil, aby se těchto možností, aby vaše getCurrentPositionAsync

        export const MapScreen = ({navigation}) => {
        
          const [location, setLocation] = useState({
          latitude: 37.78825,
          longitude: -122.4324,
    });
          const [errorMsg, setErrorMsg] = useState(null);
          useEffect(() => {
            (async () => {
              let { status } = await Location.requestForegroundPermissionsAsync();
              if (status !== 'granted') {
                setErrorMsg('Permission to access location was denied');
                return;
              }
        
              let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
});
              setLocation(location);
            })();
          }, []);
        
          return (
            <> 
            <SearchBarContainer>
              <Searchbar placeholder="location"/>
            </SearchBarContainer>
            <Map region={location} showsUserLocation={true}/>
            </>
          );};

Koen van der marel · Answer 1 · 2021-11-25T12:37:55

Byl jsem potýkají s tímto problémem na pár dní stejně a připadá mi to velmi divné, že i když expo MapView můžete zobrazit vlastní polohu na mapě, to nelze vrátit své vlastní coördinates.

I přes to, že problém může být stanovena s následující řešení.

Instalace Expo-umístění

expo nainstalovat expo-umístění

Importovat

import * as Location from 'expo-location'

Vytvoření státu

const [location, setLocation] = useState({});

Vytvořit useEffect funkci, která načte váš coördinates asynchronní (vyhledávání umístění na tlačítko tisk může trvat až 5-10 sekund, což je směšně pozdě, pokud jde o uživatelské zkušenosti)

useEffect(() => {
        (async () => {
            let { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
                return;
            }

            let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
            });
            setLocation(location);
        })();
    }, []);

Vaše Mapview musí mít referenční mluvit do MapView a nastavit je coördinates.

<MapView ref={mapRef}>.... </MapView>

const mapRef = React.createRef();

A nakonec vytvořte funkci, která může být vyvolána vlastní tlačítko na střed na umístění uživatele.

const goToMyLocation = async () => {
        mapRef.current.animateCamera({center: {"latitude":location.coords.latitude, "longitude": location.coords.longitude}});
}

mohamed aldie · Answer 2 · 2021-11-24T13:05:32

Budete muset projít uživatelské souřadnice poskytována Expo umístění api do vašich map součást nezbytného ukázat aktuální Polohu, také musíte nastavit počáteční stav pro svou polohu (lat,lng) takto a budete-li hledat vyšší přesnost bych doporučil, aby se těchto možností, aby vaše getCurrentPositionAsync

        export const MapScreen = ({navigation}) => {
        
          const [location, setLocation] = useState({
          latitude: 37.78825,
          longitude: -122.4324,
    });
          const [errorMsg, setErrorMsg] = useState(null);
          useEffect(() => {
            (async () => {
              let { status } = await Location.requestForegroundPermissionsAsync();
              if (status !== 'granted') {
                setErrorMsg('Permission to access location was denied');
                return;
              }
        
              let location = await Location.getCurrentPositionAsync({
                accuracy: Location.Accuracy.Balanced,
                enableHighAccuracy: true,
                timeInterval: 5
});
              setLocation(location);
            })();
          }, []);
        
          return (
            <> 
            <SearchBarContainer>
              <Searchbar placeholder="location"/>
            </SearchBarContainer>
            <Map region={location} showsUserLocation={true}/>
            </>
          );};

Ahoj, díky za odpověď. Jsem implementoval svůj kód. Nicméně, já mám stále varování : Nepodařilo vrtule typu: prop regionu.latitudeDelta je označeno jako povinné v mapView, ale jeho hodnota je undefined. A mapa je stále ještě není soustředěné kolem aktuálního umístění?

Jak centrum MapView na aktuální polohy uživatele, když se Obrazovka Mapa je otevřel? Reagovat Native Expo

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii