Импорт JS-файла Google Maps API с помощью React

#reactjs #google-maps #create-react-app

#reactjs #google-карты #создать-реагировать-приложение

Вопрос:

Я пытаюсь интегрировать функцию polygon containsLocation в свое приложение react. В настоящее время, похоже, это поддерживается только фактической библиотекой JS, импортированной с maps.googleapis.com добавлен тег script. При этом я продолжаю получать ошибку no-undef при попытке использовать карты.Конструктор полигонов (в настоящее время я использую create-react-app с настройками по умолчанию). Есть ли какой-либо способ предотвратить это?

Код, вызывающий проблему:

 var addedPoly = {
     polygon: maps.Polygon({
                            paths: parsedCoords
                        })
}
  

Ответ №1:

create-react-app использует Eslint для того, чтобы выровнять ваш код. Учитывая, что вы включили библиотеку Google maps с помощью тега script, она доступна глобально, в то время как create-react-app (с его конфигурацией eslint) не ожидает глобальных значений, если они не объявлены как таковые.

Вы можете увидеть в документации eslint ошибку no-undef

Есть несколько вариантов устранения этой проблемы. Во-первых, если он глобальный, он будет доступен через переменную window.

 const maps = window.maps;
  

Таким образом, он становится локальной переменной.

В противном случае вы могли бы добавить файл .eslintrc (если он еще не существует), где вы устанавливаете карты как глобальные

 "globals": {
    "maps": true
}
  

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

 /*global maps*/
  

который также будет работать.

Преимущество второго варианта перед другими заключается в том, что вам нужно реализовать его только один раз, два других варианта подразумевают изменения в каждом файле, где maps используется. Это зависит от вас