ВНЕШНИЙ ИНТЕРФЕЙС

Как использовать API Карт Google с пользовательским стилем в React.js

Интегрируйте красивые карты Google в свой проект React

Когда мой друг попробовал сделать новую прическу, я спросил его: «Почему ты так подстригся?» И сказал, что хочет засветиться как модель. Поэтому я понял, что людям нравится показывать их уникально и красиво.

Когда я разрабатывал персональное приложение для реагирования, я хотел реализовать API карты Google. Я искал много примеров в Google и, наконец, нашел простое решение. Здесь я кратко объясню, как я использовал приложение и какие пользовательские стили мы могли бы добавить на карту Google. Здесь мы будем смотреть с нуля. Вы можете увидеть демо здесь. Это моя 29-я статья в Medium.

В первую очередь

Если у вас нет токена Google Maps API, зарегистрируйтесь Google Maps API и получите токен для использования! Для получения токена необходимо ввести номер кредитной карты. Тем не менее, Google заявляет, что они не будут взимать плату с вашего аккаунта без вашего личного обновления. Принимайте свое решение. Получив ключ API, приступайте к разработке своего приложения!

Чтобы создать приложение для реагирования, выполните следующую команду в вашей оболочке / терминале в определенной папке (например, на рабочем столе)

npx create-react-app google-map

Будет создана новая папка с именем google-map. С этого шага ваше приложение загружается с помощью Create React App. Для получения дополнительной информации нажмите ссылку. Затем откройте этот проект в своей среде IDE. Я использую VS Code IDE.

Настройтесь на свою работу

Если вы откроете приложение для реагирования, вам необходимо удалить ненужные файлы. Поэтому вам нужно перейти в папку src и удалить файлы Logo.svg, App.css, index.css и App.test.js. И создайте следующие папки внутри папки src с именами components, assets и helpers, затем переместите ваш serviceWorker.js в папку помощника и файл App.js в папку Components. Затем откройте файл index.js и удалите следующий фрагмент в файле index.js.

import ‘./index.css’;

Затем измените пути к файлам App.js и serviceWorker.js в импорте index.js, как показано ниже.

import App from ‘./components/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;

Перейдите в папку «Компоненты» и откройте файл App.js. Удалите возвращаемую часть функции приложения.

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

npm install --save google-maps-react

С нуля

Создайте новый файл в приложении Component и назовите его Map.js. Затем вам нужно импортировать google-maps-rect. Для этого добавьте следующий фрагмент в Map.js.

import { Map, GoogleApiWrapper } from 'google-maps-react';

Теперь вам нужно отрендерить Map компонент. Поэтому добавьте компонент Map в вашу функцию рендеринга.

В приведенный выше код я добавил обычный стиль. Я сделал это как постоянную переменную внутри метода рендеринга.

const mapStyles = {
  width: '100%',
  height: '100%',
};

вам нужно добавить оператор экспорта по умолчанию в файл Maps.js, как показано ниже во фрагменте

export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(MapContainer);

Обязательно введите здесь свой ключ API!

Импортируйте компонент Maps в файл App.js. Итак, ваш App.js должен быть таким, как показано ниже.

Когда вы запускаете свой сервер разработки с помощью npm start, вы можете увидеть результат ниже.

Бум! вы сделали это, но какой смысл использовать карту Google. Но законно, что означает использование карты Google без маркера. Поэтому добавим маркер. Для этого обновите компонент Map, включив в него компонент Marker. Здесь я использовал другую широту и долготу, вы можете использовать любую широту и долготу, которые вам нужны.

import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

Большой! вы добавили маркер на карту.

Вещь красоты - это вечная радость

Теперь вы находитесь в самой интересной части этой статьи. Теперь займемся индивидуальными стилями. Это просто объект JSON. Вы сохраните пользовательские стили JSON в файле GoogleMapStyles.js. Тема, которую я использовал из Мастера стилей: API карт Google. Если вам нужны более красивые стили, попробуйте стиль из Snazzy Maps или создайте свой собственный уникальный стиль карты, настроив объект JSON. ваш файл GoogleMapStyles.js будет выглядеть следующим образом.

Теперь вам нужно импортировать этот стиль JSON в свой Maps компонент.

import googleMapStyles from “./GoogelMapStyle”;

После импорта стилей JSON вы можете установить стиль JSON как defaultProps компонента Maps. Это можно сделать, определив defaultProps в самом классе компонента, вне тела класса, как показано в следующем фрагменте кода:

Maps.defaultProps = googleMapStyles;

Затем вам нужно передать эту опцию свойствам стилей компонента Map, как показано в следующем фрагменте кода:

<Map
  google={this.props.google}
  zoom={15}
  styles={this.props.mapStyle}
  initialCenter={{ lat: 9.761927, lng: 79.95244 }}
/>;

Теперь ваш Maps компонент будет выглядеть так, как показано в файле ниже.

Поднимите ноги

Реализовать карту Google в React легко. Существует множество пакетов npm, которые помогают реализовать карту Google в React. Для меня google-maps-react прост в использовании и имеет меньший размер пакета, чем другие. Вы можете клонировать репо по этой ссылке.

Удачного кодирования 😊 !!!