Это будет поэтапный процесс встраивания карт Google в ваше приложение. Этот процесс предполагает, что у вас уже запущено приложение React и что вы находитесь в требуемом каталоге этого приложения.
Шаг первый.
Во-первых, нам нужно импортировать необходимые зависимости для настройки карты.
npm i react-google-maps
Шаг второй.
Далее нам понадобится ключ API. Для этого вам нужно будет создать учетную запись для использования консоли Google Cloud Platform и настроить платежную информацию для этой учетной записи (это необходимо, хотя с вас не будет взиматься плата, если ваш ключ не превышает установленный предел скорости).
На платформе разработчиков Google есть очень подробный и полезный пошаговый инструктаж по получению ключа API для ваших карт, доступ к которому вы можете получить здесь: https://developers.google.com/maps/documentation/ javascript / get-api-key
При создании ключа API в первую очередь следует руководствоваться требованиями вашего проекта.
На этом этапе и в рамках этого пошагового руководства мы включим только Maps JavaScript API и Geocoding API, что будет минимумом, который нам потребуется. начать. Однако есть множество других API, которые вы можете изучить или поиграть, чтобы укрепить / настроить свою карту. Одним из таких API является Places API, который часто используется вместе с двумя другими API. Поиск мест и Автозаполнение мест - две функции этого API, которые стали популярными благодаря своей способности возвращать подсказки мест на основе местоположения пользователя или строки поиска.
Если вы заинтересованы в реализации этой функциональности, в Интернете можно найти множество ресурсов, которые могут помочь вам, но, безусловно, наиболее изобретательным для меня была собственная Документация по местам Google Map.
Теперь, когда вы создали свой ключ API, вы можете начать использовать его в своем приложении.
Помните, что если вы явно укажете ключ API в любом месте приложения, он будет виден всем, кто может иметь доступ к вашему исходному коду. Чтобы предотвратить утечку и возможное неправильное использование вашего ключа API, вы можете скрыть или защитить свой ключ. Для этого:
Internally
1. Create a .env file in the directory of your project
2. In that file, create a variable called
REACT_APP_GOOGLE_MAPS_API_KEY="your-key"
and set the value of that variable to whatever your key is.
3. Reference your key anywhere in your application by calling
process.env.REACT_APP_GOOGLE_MAPS_API_KEY
4. Don't forget to add .env to your .gitignore file (if it isn't there already) to prevent this file from being uploaded with your commits to GitHub.
Externally
1. You can also restrict your key, in your Google Cloud Platform Console by going to Credentials > API Keys > Key Restrictions
2. You can do so by setting Application restrictions which dictate which IP addresses or websites can use your key
3. Or you can set API restrictions which control which enabled APIs your key is able to call
Шаг третий.
Теперь, когда вы настроили ключ, пора начать рендеринг карты. Во-первых, нам нужно импортировать функции, которые нам нужны, из нашей зависимости React Google Maps - здесь мы будем импортировать функцию Map, а также GoogleApiWrapper, компонент высшего порядка, который принимает объект конфигурации, который должен включать ourapiKey.
import {Map, GoogleApiWrapper} from 'google-maps-react';
export class MapContainer extends React.Component {
render() {
return (
<Map
google={this.props.google}>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY
})(MapContainer)
Примечание. Существуют и другие функции, которые обычно добавляются к картам, включая функцию маркера и функцию InfoWindow. Включение и настройка этих элементов подробно обсуждается в этом блоге: «https://www.newline.co/fullstack-react/articles/how-to-write-a-google-maps-react -составная часть/".
Шаг четвертый.
В настоящее время, хотя у нас есть ссылка на наш объект Google (карту), сама карта не может отображаться без соответствующего контейнера ширины / высоты. Обычно это передается карте как опора вместе с рядом дополнительных опор, которые легко доступны для настройки вашей карты. Это включает:
style- это компонент стиля CSS, обычно определяющий высоту и ширину контейнера карты.initialCenter- определяет центр карты, который отображается после первоначальной загрузки карты. Он будет содержать числа широты и долготы.zoom- это масштаб по умолчанию или начальный масштаб карты при загрузке. Чем выше число, тем жестче фокусировка в центре карты.
Эти различные свойства могут быть сохранены как объекты (как показано ниже) и на них можно ссылаться из компонента Map. Хотя обычно эти объекты хранятся в вашем методе рендеринга, сохраняя их в переменных вне компонента карты, вы можете избежать любых потенциальных конфликтов, которые могут возникнуть при повторном рендеринге карты во время работы вашего приложения.
...
const defaultZoom = {8}
const center = {
lat: 51.311280,
lng: 0.051410
}
const mapStyle = {
height: "100vh",
width: "100vw"
}
export class MapContainer extends React.Component {
render() {
return (
<Map
google={this.props.google}
zoom={defaultZoom}
initialCenter={center}
style={mapStyle}
>
</Map>
);
}
}
...
Еще один шаг…
Если вы хотите сделать еще один шаг вперед по стилю карты, вы можете добавить дополнительную настройку, посетив snazzymaps.com.
Здесь вы можете найти управляемый сообществом репозиторий различных стилей, которые вы можете использовать для настройки своих карт Google. Чтобы использовать один из этих стилей, все, что вам нужно сделать, это:
- Выберите свой любимый стиль и сохраните массив типов Javascript в файл в своем каталоге. Имя этого файла может быть любым, но я выбрал customMapStyle.js.
- В этом файле обязательно экспортируйте объект JSON как таковой:
export default [
[
{
"featureType": "administrative",
"elementType": "all",
"stylers": [
{
"visibility": "on"
}
...
3. Импортируйте только что созданный файл в файл с компонентом карты. Вы можете сделать это, как показано ниже:
import customMapStyle from './customMapStyle'
4. Сохраните его в объекте с именем options и передайте на карту как параметр стиля.
const options = {
style: customMapStyle
}
export class MapContainer extends React.Component {
render() {
return (
<Map
google={this.props.google}
style={options}
>
</Map>
);
}
}
Или, если вы чувствуете себя особенно творчески, в SnazzyMaps есть функция, с помощью которой вы можете отправить свой собственный стиль карты.
Заключение
Я надеюсь, что вы нашли эту статью полезной, и если у вас есть какие-либо отзывы или предложения по улучшению статьи, пожалуйста, свяжитесь с нами. Удачного кодирования!
