05.05.2020 в 16:10

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

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

Фото Pixabay из Pexels — Фото Pixabay из Pexels

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

Прежде всего

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

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

npx create-react-app google-map

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

Фото Николь Де Хорс из Burst — Фото Николь Де Хорс из Burst

Приступайте к работе

Если вы открываете приложение react, то вам нужно удалить ненужные файлы. Поэтому вам нужно перейти в папку 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

Фото Бруно Насименто на Unsplash — Фото Бруно Насименто на Unsplash

С нуля

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

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

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

export class Maps extends React.Component {
  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };
    return (
      <Map
        google={this.props.google}
        zoom={15}
        style={mapStyles}
        initialCenter={{ lat: 9.761927, lng: 79.95244 }}
      />
    );
  }
}

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

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

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

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

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

Фото Кристиана Мурильо из Burst — Фото Кристиана Мурильо из Burst

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

import React from "react";
import Maps from "./Maps";

function App() {
  return <Maps />;
}

export default App;

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

Boom! Вы сделали это, но какой смысл использовать google map без какого-либо маркера?. Поэтому давайте добавим маркер. Для этого обновите свой компонент Map, чтобы включить его Marker. Здесь я использовал другую широту и долготу, вы можете использовать любую широту и долготу, которые вам нужны.

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

export class Maps extends React.Component {
  render() {
    const mapStyles = {
      width: "100%",
      height: "100%",
    };
    return (
      <Map
        google={this.props.google}
        zoom={8}
        style={mapStyles}
        initialCenter={{ lat: 9.761927, lng: 79.95244 }}
      >
        <Marker position={{ lat: 9.761927, lng: 79.95244 }} />
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "API_KEY",
})(Maps);

Здорово! Вы добавили маркер на карту.

Красота-это вечная радость

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

export default {
  mapStyle: [
    {
      elementType: "geometry",
      stylers: [
        {
          color: "#ebe3cd",
        },
      ],
    },
    {
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#523735",
        },
      ],
    },
    {
      elementType: "labels.text.stroke",
      stylers: [
        {
          color: "#f5f1e6",
        },
      ],
    },
    {
      featureType: "administrative",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#c9b2a6",
        },
      ],
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#dcd2be",
        },
      ],
    },
    {
      featureType: "administrative.land_parcel",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#ae9e90",
        },
      ],
    },
    {
      featureType: "landscape.natural",
      elementType: "geometry",
      stylers: [
        {
          color: "#dfd2ae",
        },
      ],
    },
    {
      featureType: "poi",
      elementType: "geometry",
      stylers: [
        {
          color: "#dfd2ae",
        },
      ],
    },
    {
      featureType: "poi",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#93817c",
        },
      ],
    },
    {
      featureType: "poi.park",
      elementType: "geometry.fill",
      stylers: [
        {
          color: "#a5b076",
        },
      ],
    },
    {
      featureType: "poi.park",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#447530",
        },
      ],
    },
    {
      featureType: "road",
      elementType: "geometry",
      stylers: [
        {
          color: "#f5f1e6",
        },
      ],
    },
    {
      featureType: "road.arterial",
      elementType: "geometry",
      stylers: [
        {
          color: "#fdfcf8",
        },
      ],
    },
    {
      featureType: "road.highway",
      elementType: "geometry",
      stylers: [
        {
          color: "#f8c967",
        },
      ],
    },
    {
      featureType: "road.highway",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#e9bc62",
        },
      ],
    },
    {
      featureType: "road.highway.controlled_access",
      elementType: "geometry",
      stylers: [
        {
          color: "#e98d58",
        },
      ],
    },
    {
      featureType: "road.highway.controlled_access",
      elementType: "geometry.stroke",
      stylers: [
        {
          color: "#db8555",
        },
      ],
    },
    {
      featureType: "road.local",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#806b63",
        },
      ],
    },
    {
      featureType: "transit.line",
      elementType: "geometry",
      stylers: [
        {
          color: "#dfd2ae",
        },
      ],
    },
    {
      featureType: "transit.line",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#8f7d77",
        },
      ],
    },
    {
      featureType: "transit.line",
      elementType: "labels.text.stroke",
      stylers: [
        {
          color: "#ebe3cd",
        },
      ],
    },
    {
      featureType: "transit.station",
      elementType: "geometry",
      stylers: [
        {
          color: "#dfd2ae",
        },
      ],
    },
    {
      featureType: "water",
      elementType: "geometry.fill",
      stylers: [
        {
          color: "#b9d3c2",
        },
      ],
    },
    {
      featureType: "water",
      elementType: "labels.text.fill",
      stylers: [
        {
          color: "#92998d",
        },
      ],
    },
  ],
};

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

import googleMapStyles from “./GoogelMapStyle”;

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

Maps.defaultProps = googleMapStyles;

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

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

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

import googleMapStyles from "./GoogelMapStyle";

export class Maps extends React.Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={8}
        style={this.props.mapStyle}
        initialCenter={{ lat: 9.761927, lng: 79.95244 }}
      >
        <Marker position={{ lat: 9.761927, lng: 79.95244 }} />
      </Map>
    );
  }
}

Maps.defaultProps = googleMapStyles;

export default GoogleApiWrapper({
  apiKey: "API_KEY",
})(Maps);

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

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

Источник:

How to use the Google Maps API with Custom styling in React.js

#JavaScript #React

4976