Введение
На этапе 4 нашего проекта в школе FlatIron я и мой партнер решили скопировать некоторые популярные сайты аренды недвижимости, такие как StreetEasy и Zillow. Важной особенностью этих сайтов является карта желаемого района с маркерами, указывающими расположение арендуемой собственности.
Обе карты были изменены и стилизованы разработчиками соответствующих сайтов, но по сути они все еще используют API Google. После быстрого поиска в Интернете мы будем работать с API Google Maps Javascript API.
Хотите прочитать эту историю позже? Сохранить в журнале.
Я впервые сталкиваюсь с Google Cloud Platform, вам нужно будет создать учетную запись разработчика, чтобы сгенерировать ключ API. К счастью, Google предлагает постоянный кредит в размере 200 долларов на API Карт Google, примерно 100 000 запросов, что более чем достаточно для нашего простого проекта.
Библиотека Google содержит 326 общедоступных API-интерфейсов, поэтому в будущем будет много интересного. Как только вы найдете ключ API в своем профиле, мы сможем запустить новое приложение React:
Пошагово:
Запустите новый проект в желаемом каталоге и запустите следующий код, чтобы запустить новое приложение для реагирования:
npx create-react-app <app-name>
Затем установите зависимости:
npm install google-map-react
npm install semantic-ui-react semantic-ui-css
Обратите внимание, что я уже использовал semantic-ui в качестве фреймворка css для остальной части проекта, и нам действительно нужен только значок из semantic, чтобы вы могли использовать другую зависимость по вашему выбору. Вам также может потребоваться добавить «- force» в конец установки google-map-react, если возникнут ошибки.
Если вы все же решите использовать semantic-ui, не забудьте включить в файл index.js следующий код:
import 'semantic-ui-css/semantic.min.css'
После установки зависимостей вы можете удалить все ненужные файлы и очистить файл app.js.
Затем создайте 2 файла компонентов, один из которых является компонентом карты, а другой - компонентом маркера. См. Примеры синтаксиса на следующих снимках экрана:
Обратите внимание на место, в которое вы должны ввести свой ключ Google API, который вы получили из своего профиля разработчика. В противном случае компонент карты не будет отображаться!
В приведенном выше примере один маркер был закодирован в компоненте GoogleMapReact, а центр карты также был жестко запрограммирован. Вы можете заменить значения центра и масштабирования на реквизиты, чтобы сделать его более динамичным, а также настроить функции на значения по умолчанию вместо жесткого кодирования. Но для целей этого примера я покажу пример с одним маркером и пример с несколькими маркерами.
Для просмотра карты вам необходимо обновить файл index.css со следующими свойствами:
Связывается с className, которое было обновлено в компоненте Map. Помимо этого, вы можете манипулировать данными, которые вы вводите, по своему усмотрению. Маркеры будут работать до тех пор, пока передаются стойки для широты и длинны.
Мой пример был жестко запрограммирован так, чтобы он был сосредоточен на Сан-Франциско, а маркер - на трио домов Painted Ladies. Если вы не знаете, где получить координаты, вы можете перейти на карты Google и щелкнуть правой кнопкой мыши в любом месте карты, чтобы получить широту и долготу в точке, где вы щелкнули.
Возможности отсюда безграничны, пока у вас есть необходимые координаты. Можно разместить несколько маркеров, если сопоставить массив координат и передать их в качестве свойств компонентам маркера.
Спасибо, что подписались! Это был беглый взгляд на новый API, который я изучил на этапе 4 моего путешествия по школе FlatIron.
Для получения дополнительной информации о Maps JavaScript API перейдите по следующей ссылке.
Загляните в эту песочницу кода, чтобы увидеть, как будет выглядеть мультимаркерная карта.
📝 Сохраните эту историю в Журнале.
