- API геолокации ️

В недавнем моем проекте React мне нужно было найти ближайшее к пользователю местоположение из нескольких мест всемирных медицинских исследовательских институтов (Испытания) и отобразить его содержимое.

Звучит сложно. Сначала это показалось беспорядочным, но после внимательного рассмотрения я заметил, что на самом деле здесь 4 пункта:

  • текущее положение пользователя 📍
  • всемирные испытания 📍
  • местоположения из каждой пробной версии 📍
  • ближайшее к ним место 📍

🤯

Но давайте упростим это шаг за шагом:

Сначала узнайте текущую позицию нашего пользователя с помощью Geolocation API, чтобы потом иметь возможность сравнивать со всеми пробными местоположениями:

В моем проекте есть API, который возвращает информацию об одной единственной пробной версии. Сначала я получил данные, как показано ниже:

📝 Но б или эту статью, я буду использовать фиктивные данные для пробной версии

Во-вторых, создайте функцию как настраиваемую ловушку, которая рассчитывает расстояние между пользователем и пробным местоположением, используя « широта и долгота как широта и долгота:

Затем импортируйте этот настраиваемый обработчик в компонент реакции с помощью:

Затем создайте функцию getFinalTrial (), которая использует этот настраиваемый обработчик и возвращает ближайшее пробное местоположение:

Что я сделал выше:

  1. проверьте, есть ли tryDetail и его местоположения, возвращенные из бэкэнда (в реальном проекте, полученном из API, для этой статьи используйте фиктивные данные из первого шага «trialDetail»)
  2. если да, «сопоставьте» местоположения trialDetail, получите массивы trialLatitude и trialLongitude (💥 ключи здесь опущены в примере, но они должны использоваться явно в реальном мире, например, это могут быть идентификаторы)
  3. возьмите пробную широту, «сопоставьте» ее и получите массив, содержащий каждую пробную широту, я использую индекс для каждого элемента широты и соотносю их каждой долготе в массиве trialLongitude
  4. вызовите функцию distance (), которая импортирована из пользовательского хука useLocationDistance с этими параметрами, это возвращает массив, содержащий все расстояния для сравнения между пользователем и каждым пробным местоположением
  5. найдите наименьшее число, которое является кратчайшим расстоянием от этого массива, определите его как ближайшее и используйте его индекс, чтобы найти соответствующее местоположение из все места проведения испытаний

Последний шаг:

Если мы "console.log" finalLocationInfo, мы получим это ближайшее местоположение (которое является первым из местоположений пробной версии в этом примере) 👇

С помощью useEffect мы можем обновить finalInfo (состояние опущено в примере кода выше) и отображать все, что мы хотим, например, «finalInfo.recruitmentStatus» и т. д. внутри нашего тела «return» способом React.

Вот и все!

Я думаю, что этот пример довольно интересен, но из-за отсутствия у меня опыта программирования могут быть некоторые недостатки. Буду очень признателен за совет, спасибо!

Больше контента на plainenglish.io