Последние две недели моего буткемпа по разработке программного обеспечения вращаются вокруг всеобъемлющего проекта с полным стеком, созданного с использованием React/Redux, Express и MySQL. Для моего проекта интеграция с Google Maps была необходима, но ее реализация в React оказалась не такой простой, как я надеялся. Google Maps JavaScript API создан не для одностраничного приложения React, а для вашей заурядной веб-страницы HTML, CSS, JS. Существует множество JS-библиотек с похожими названиями, которые пытаются решить эту проблему, но, по моему опыту, они не поддерживаются или в них отсутствуют важные функции, которые предлагает API. С небольшой настройкой и большой помощью Кимберли (чью статью я встроил, хотя вам понадобятся мои настройки!), я смог получить доступ ко всему диапазону и мощности API Карт Google, все прекрасно содержащееся в один компонент React без каких-либо внешних библиотек.
Мы начнем с необходимости компонента React, импортируем компонент из React, настраиваем наш класс (я назвал свой GoogleMap), его рендеринг и делаем этот класс экспортом по умолчанию. Единственным условием здесь является то, что отображаемый элемент (я бы рекомендовал div) нуждается в каком-то атрибуте, который позволит вам получить к нему доступ позже, используя либо getElementById(), либо собственную систему ссылок React. Я решил использовать Ref, и я включил свой код ниже. Вы можете стилизовать этот div как обычно, и вы можете добавить встроенный тег, чтобы ограничить его размер, что я также сделал.
Далее нам нужно интегрировать тег скрипта для Google Maps API. Это можно легко сделать, бросив тег script, предоставленный в Docs, в ваш index.html, но я бы рекомендовал добавить его на страницу внутри компонента. Это имеет дополнительное преимущество, заключающееся в возможности использовать переменную вместо ввода вашего ключа API, что позволяет безопасно хранить его в файле, игнорируемом git. Мой находится в моем личном файле config.js для этого приложения. Мы собираемся выполнить эту манипуляцию с DOM внутри componentDidMount, чтобы он запускался один раз при загрузке. Здесь мы выполняем манипуляции с DOM, чтобы создать элемент скрипта, установить его значение src на ссылку API Google (со скрытым ключом API), а затем добавить его на страницу. Вот код.
Итак, у нас есть подключенный скрипт и наш компонент, так что давайте добавим карту! На данный момент мы можем следовать документам с небольшими изменениями. Нам просто нужно взять методы, предусмотренные для создания новых элементов, и поместить их в метод класса. Здесь могут быть назначены все те же свойства, что и в Документах. Мы просто используем окно для доступа к сценарию, который мы сделали доступным ранее, и ссылку, которую мы создали, чтобы сообщить ему, куда идти на странице. Моя карта будет сосредоточена на Эйфелевой башне. Как мы обсудим далее, важно содержать создание этого элемента в операторе return, потому что вам нужно будет сослаться на него позже!
Итак, у нас есть функция создания карты, но, как вы могли заметить, мы никогда ее не запускаем! Теперь мы вернемся к componentDidMount и исправим это, одновременно исправив возможную ошибку. Эта функция может работать только после загрузки скрипта Google. Чтобы не идти слишком рано, мы запустим эту функцию как обратный вызов для прослушивателя событий, который ожидает загрузки скрипта. Когда это происходит, мы запускаем этот фрагмент кода, и наша карта создается. Мы также установим это равным свойству класса, чтобы мы могли ссылаться на нашу карту позже при добавлении таких вещей, как маркеры или фигуры, которые должны знать, на какую карту они идут!
Теперь у вас должна появиться реальная карта Google в вашем обработанном div. Однако обычная карта скучна, и вы неизбежно захотите добавить такие вещи, как маркеры и фигуры. Я пройдусь по добавлению маркера на карту, что должно прояснить, как добавлять другие элементы. Нашим первым шагом, как и при создании карты, является настройка функции класса, которая выполняет почти тот же код, который используется в Документах для создания нового маркера. Единственная разница здесь, кроме того, что он заключен в метод класса, заключается в установке его родительской карты. Поскольку мы установили для нашей созданной карты значение this.googleMap, именно на него мы будем ссылаться в свойстве карты маркера. Вот функция для его создания. Координаты моего маркера поместят его прямо на Эйфелеву башню.
Как и в случае с картой, теперь нам нужно запустить эту функцию при загрузке скрипта (но после того, как мы создадим экземпляр нашей карты). Поскольку вы, возможно, захотите сослаться на этот маркер позже, возможно, прикрепив к нему что-то вроде InfoBox, я сохранил его с помощью this.marker. Вот мой новый прослушиватель событий и обратный вызов.
Отсюда вы сможете понять небольшие отклонения от документации, необходимые для хорошей работы с React. Вы заменяете их функции создания методами класса в своем компоненте и используете this, чтобы позже ссылаться на элементы, чтобы добавить к ним что-то, например маркер на нашу карту или информационный блок на маркер. Помимо этого, вы используете те же свойства и обладаете всеми теми же функциями, но ваш компонент поставляется в красиво упакованном компоненте React. В моем проекте я заменю все жестко заданные значения широты и долготы на props, которые я буду интерпретировать с помощью Google Geocoding API, который преобразует адреса в широту/долготу для удобства использования (о чем я расскажу позже). ). Я надеюсь, что это помогло тем, кто хочет внедрить Карты Google в свои приложения React, так как я попытался сделать руководство, подробно описывающее именно то, что я искал! Я прикрепил окончательный код и скриншот того, что он должен отображать на вашей странице после того, как вы предоставите ему ключ API. Удачного кодирования!
