Поиск мест поблизости с использованием Places API в React Native

Всем привет. Меня зовут Юша Сарысой. Я инженер-программист из Стамбула, Турция, и это будет моя первая статья, опубликованная на Medium, поэтому я очень взволнован. В этой статье я шаг за шагом объясню, как получать близлежащие места к вашему текущему местоположению в React Native с помощью Places API. Поскольку React Native - это кроссплатформенный фреймворк, вы можете использовать этот метод как для устройств Android, так и для iOS. Подчеркну, это будет для тех, кто хочет применить этот метод к существующему проекту. После этих незначительных пояснений мы можем вернуться к работе.

Прежде всего, мы откроем Google Cloud Platform, чтобы получить наш уникальный ключ API. В Google Cloud Platform нажмите кнопку меню гамбургера слева, и вы увидите раздел API и сервисы. В этом разделе мы продолжим работу с Учетными данными. В Credentials вы увидите следующий экран:

Чтобы получить ключ API, нажмите «+ СОЗДАТЬ УЧЕТНЫЕ ДАННЫЕ» вверху экрана. После получения ключа API ваш ключ API будет показан на экране.

После этих процедур мы можем приступить к кодированию. Я буду использовать Visual Studio Code для разработки своих проектов на React Native. В свой GooglePlacesAPI.js я добавлю свой ключ API. Кроме того, вы можете добавить ключевое слово, определяющее тип мест, которые вы хотите показать вокруг текущего местоположения. Я пока оставлю это как код комментария.

export const googleAPIKey = ‘YOUR_API_KEY’;
// export const placeType = ‘cafe’;

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

import {googleAPIKey, placeType} from ‘../../Helpers/GooglePlacesAPI’;

Затем я установлю асинхронную функцию под названием «fetchNearbyPlaces». В этом случае я буду назначать только определенные значения широте и долготе, поскольку я воспринимаю местоположение по-другому. Назначим значения местоположения Сан-Франциско, Калифорния, США.

// Set charger station’s latitude & longitude.
const latitude = 37.773972;
const longitude = -122.431297;

После назначения значений местоположения нам нужно установить максимальное расстояние от текущего местоположения, чтобы мы могли перечислить местоположения вокруг нас.

// Search within maximum 4 km radius.
let radius = 4 * 1000;

Теперь это одна из наиболее важных частей, потому что мы установим URL-адрес для получения данных.

const url =
  ‘https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' +
  latitude +
  ‘,’ +
  longitude +
  ‘&radius=’ +
  radius +
//  ‘&type=’ +
//  placeType +
  ‘&key=’ +
  googleAPIKey;

Наконец, мы можем получить окончательные данные.

fetch(url)
  .then(res => {
    return res.json();
  })
  .then(res => {
    for (let googlePlace of res.results) {
      var place = {};
      var myLat = googlePlace.geometry.location.lat;
      var myLong = googlePlace.geometry.location.lng;
      var coordinate = {
        latitude: myLat,
        longitude: myLong,
      };
      place[‘placeTypes’] = googlePlace.types;
      place[‘coordinate’] = coordinate;
      place[‘placeId’] = googlePlace.place_id;
      place[‘placeName’] = googlePlace.name;
      places.push(place);
    }

    // Show all the places around 4 km from San Francisco.
    console.log(
      ‘The places around San Francisco, CA, USA: ‘ +
      places.map(nearbyPlaces => nearbyPlaces.placeName),
    );
  })
  .catch(error => { 
    console.log(error);
  });
});

И мы на последнем этапе. Давайте вызовем функцию и посмотрим, каков будет ее результат.

Получаем именно то, что хотим. Если у вас есть вопросы, вы можете связаться со мной по адресу [email protected]. Спасибо, что прочитали мою первую статью. Следующая статья будет о Yelp Fusion API. Желаю вам удачного дня!