Простое руководство по реализации карты Google с маркером с использованием функциональных компонентов реагирования. @react-google-maps/api

"Документация"

Что-то, что звучит так просто, может в конечном итоге оказаться чрезвычайно сложным и сложным для выполнения по многим причинам, либо, возможно, информация сильно различается, и ни одна из них не является точной, это может быть новая тема, которую люди все еще выясняют. «лучшая практика» о том, как его развивать и т. д.

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

Прежде чем мы начнем, это то, что нам нужно, чтобы эта карта работала.

  • Создайте и организуйте приложение для реагирования.
  • Установите зависимость модуля @react-google-maps/api через командную строку.
npm i -S @react-google-maps/api
  • Google Maps API KEY, следуйте этому руководству о том, как его получить.

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

Мы можем импортировать необходимые компоненты для создания карты Google.

import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';

Таким образом, карта Google будет принимать некоторые атрибуты для работы, стиль карты, ее центр или ее фокус и масштаб, который вы хотите иметь, мы собираемся передать это как объекты.

const containerStyle = {
width: '400px',
height: '400px'
};
const center = {
lat: 3.43722,
lng: -76.5225
};

И просто обернув GoogleMapвнутри компонента LoadScript и передав ему свой ключ API (не забудьте передать его атрибуты):

return (
<div className="App">
<h1> This is a google map!</h1>
<LoadScript
googleMapsApiKey={KEY}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={10}
>
{ /* Child components, such as markers, info windows, etc. */ }
<Marker position={center}></Marker>
</GoogleMap>
</LoadScript>
</div>
);

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

И теперь у нас есть отображаемая карта Google с маркером, надеюсь, это руководство было полезным!