Карты Google для приложений Android и iOS

Привет! Меня зовут Рохит. Я не профессиональный автор контента, но я сделаю все возможное, чтобы к концу этой статьи вы смогли добавить функцию просмотра карты в свои приложения React Native и Expo.

Помните, что если вы тестируете это приложение с приложением Expo Go Mobile, дополнительная настройка не требуется. Но если вы планируете развернуть в любом магазине приложений, вы должны использовать Google Cloud API.

В этом видео я протестирую приложение на Expo Go Application with Pin Point Accuracy.

Рекомендую посмотреть пошаговое руководство здесь:

Настройка проекта, требования к пакету и код

Внимание всем разработчикам, стремящимся установить социальные связи и зарекомендовать себя, получая при этом пассивный доход — не ищите дальше! Я настоятельно рекомендую книгу From Code to Connections, которая поможет вам в этом процессе. Не упустите возможность получить свою копию прямо сейчас на Amazon по всему миру или Amazon India! Вы также можете выбрать Gumroad.

  • Начните свой выставочный проект
  • Установите необходимый пакет npm для этого проекта:
npx expo install expo-location
npx expo install react-native-maps
  • Во-первых, я устанавливаю регион карты по умолчанию, используя хук useState. Позже мы собираемся изменить его с текущим местоположением пользователя. Регион карты по умолчанию:
const [mapRegion, setMapRegion] = useState({
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });
  • Затем добавьте функцию «userLocation». Внутри этой функции мы сначала получим текущее местоположение пользователя, а затем заменим его состоянием региона карты. Что-то вроде этого:
const userLocation = async () => {
    let {status} = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
    }
    let location = await Location.getCurrentPositionAsync({enableHighAccuracy: true});
    setMapRegion({
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    });
    console.log(location.coords.latitude, location.coords.longitude);
  }
  • Консоль записывает координаты, чтобы убедиться, что функция работает нормально.
  • Наконец, передайте это userLocation хуку useEffect. Сделав это, приложение запомнит изменение состояния.
useEffect(() => {
    userLocation();
  }, []);
  • Вот и все. Теперь добавьте пользовательский интерфейс в соответствии с требованиями вашего проекта. Если вам нужна помощь, вы можете проверить это.
  • Если вы запутались или растерялись, я бы порекомендовал посмотреть пошаговый видеоурок. Несколько минут настройки и кода, и вы будете готовы протестировать приложение.

Почему я предлагаю смотреть больше видео?

Я из Индии, и мне нравится писать код и делиться им с сообществом. Все мы знаем, что деньги — это высшая мотивация для работы, и платежная система Medium использует Stripe, которая последние 4–5 лет находится в режиме предварительного просмотра в Индии. Я ждал год на платформе Medium, но в итоге ничего не вышло.

Итак, я начал снимать видео на YouTube, чтобы зарабатывать на жизнь. Я разместил важный код во фрагменте кода, но пошаговое руководство смотрите в видео. И если вы пойдете туда, не забудьте подписаться на мой канал для видео, связанных с React Native, Django, Python и наукой о данных.

Спасибо.