Настройка

Прежде чем начать, убедитесь, что вы настроили новое приложение для реагирования. А также получить ключ Google API. вы можете сделать это, перейдя по этой ссылке https://cloud.google.com/ и нажав кнопку Перейти к консоли. Там создайте новый проект, заполните любую информацию, а затем перейдите на панель управления проектом. Отсюда вы можете нажать на кнопку-гамбургер в правом верхнем углу и перейти в библиотеку, в окне поиска найти карты Google и включить API javascript карт. Теперь вы можете перейти на страницу учетных данных, создать новый ключ API учетных данных и сохранить этот ключ. ВНИМАНИЕ, этот ключ дает доступ к вашему проекту, не выдавайте его. Отсюда мы можем вернуться к нашему приложению. Откройте терминал и перейдите в корневой каталог приложений. Запустите команду, чтобы установить реактивный пакет Google Maps.

npm install --save google-maps-react

Визуализация карты

После этого ваше новое приложение для реагирования должно выглядеть примерно так:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class GoogleMap extends Component {
  constructor(props) {
  super(props);
}
render() {
     return (
      <div>HELLO</div>
    );
  }// end render
}// end class
export default GoogleMap;

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

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

Мы также можем изменить наш экспорт, пока мы здесь, и это будет выглядеть так. замените GOOGLE_TOKEN вашим сохраненным ключом API.

export default GoogleApiWrapper({
  apiKey: GOOGLE_TOKEN,
})(GoogleMap);

Итак, теперь, чтобы загрузить карту, мы добавляем нашу карту, которую мы импортировали из нашего пакета, в нашу функцию рендеринга вместе с некоторыми свойствами конфигурации. Итак, наша функция рендеринга теперь должна выглядеть так.

render() {
  const { google } = this.props
  return(
    <div>
      <Map
        google={google}
        zoom={10}
        minZoom={2}
        maxZoom={15}
        initialCenter={{ lat: 47.444, lng: -122.176}}
      />
    </div>
)}// end render

Поздравляю, это должно отобразить вашу карту Google.

Настройка карты

В этом разделе я быстро пройдусь по некоторым из множества функций/конфигураций вашей карты.

Удаление пользовательского интерфейса — по умолчанию карта загружается с довольно причудливым пользовательским интерфейсом.

Чтобы удалить это, просто добавьте это свойство в элемент карты.

disableDefaultUI={true}

Добавление маркера — если вы создаете какое-либо полностью построенное приложение, которое в значительной степени зависит от карты, я уверен, что вам нужны маркеры карты, чтобы использовать маркеры карты, сначала отредактируйте оператор импорта, чтобы включить компонент «Маркер».

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

Теперь, чтобы добавить маркер, мы должны реорганизовать то, как мы написали нашу карту, немного раньше, чем наша карта не имела никаких элементов внутри нее, но это то место, где должны быть наши маркеры, поэтому давайте добавим закрывающий тег к нашей карте и добавим наш первый маркер в как

<Map
  google={google}
  zoom={10}
  minZoom={2}
  maxZoom={15}
  initialCenter={{ lat: 47.444, lng: -122.176 }}
  disableDefaultUI={true}
>
  <Marker position={{ lat: 47.444, lng: -122.176}}/>
</Map>

Вы должны получить это.

Заключение

Карты Google могут показаться сложными, но на самом деле их довольно просто настроить, как только вы к ним привыкнете. Есть множество других функций, из которых они исходят, пожалуйста, повозитесь с ними и найдите то, что вам нужно для ваших целей!