Импорт JS-файла Google Maps API с помощью React
Я пытаюсь интегрировать функцию полигона containsLocation в свое приложение для реагирования. В настоящее время это поддерживается только фактической библиотекой JS, импортированной с добавленным тегом сценария maps.googleapis.com. При этом я продолжаю получать ошибку no-undef при попытке использовать конструктор maps.Polygon (в настоящее время я использую приложение create-react-app с настройками по умолчанию). Есть ли способ предотвратить это?
Код, вызывающий проблему:
var addedPoly = {
polygon: maps.Polygon({
paths: parsedCoords
})
}
Ответы 1
create-react-app использует Эслинт для анализа вашего кода. Учитывая, что вы включили библиотеку карт Google через тег сценария, она доступна глобально, в то время как приложение create-react-app (с его конфигурацией eslint) не ожидает глобальных значений, если только они не объявлены как таковые.
Вы можете увидеть в eslint документация ошибка no-undef
Есть несколько вариантов решения этой проблемы. Во-первых, если он глобальный, он будет доступен через переменную окна.
const maps = window.maps;
Таким образом, он становится локальной переменной.
В противном случае вы можете добавить файл .eslintrc (если он еще не существует), где вы устанавливаете карты как глобальные
"globals": {
"maps": true
}
последнее, но не менее важное: вы можете добавить в начало файла следующий комментарий
/*global maps*/
который также будет работать.
Преимущество второго варианта перед остальными в том, что его нужно реализовать только один раз, два других варианта подразумевают изменения в каждом файле, где используется maps. Это тебе решать