Я работал над проектом, в котором мне нужно реализовать карту Google с помощью ReactJS.
Во-первых, нам нужно установить библиотеку react-google-maps. С помощью приведенной ниже команды.
«npm install — save react-google-maps».
Мы также будем использовать recompose здесь:
npm install — сохранить recompose
Затем создайте компонент высокого порядка, который будет повторно использоваться в другом компоненте. Код для него, как показано ниже:
/*глобальный гугл*/
импортировать React из «реагировать»;
import {compose, withProps, lifecycle} из «recompose»;
Импортировать {
со скриптами,
с GoogleMap,
Google Map,
НаправленияRenderer
} из «реагировать-гугл-карты»;
класс googleMapComponent расширяет React.Component {
конструктор (реквизит) {
супер (реквизит);
}
оказывать() {
const DirectionsComponent = compose(
с реквизитом ({
googleMapURL:
«https://maps.googleapis.com/maps/api/js?key={YOUR_API_Key}&callback=initMap'»,
loadingElement: ‹div style={{ height: `400px` }} /›,
containerElement: ‹div style={{ width: `100%` }} /›,
mapElement: ‹div style={{ высота: `600px`, ширина: `600px` }} /›
}),
со скриптами,
с GoogleMap,
жизненный цикл({
компонентDidMount () {
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route(
{
происхождение: новый google.maps.LatLng(37.762391, -122.439192),
пункт назначения: новый google.maps.LatLng(37.338207, -121.88633),
режим путешествия: google.maps.TravelMode.TRANSIT
},
(результат, статус) =› {
если (статус === google.maps.DirectionsStatus.OK) {
это.setState({
направления: {…результат},
маркеры: правда
});
} еще {
console.error(`ошибка получения направления ${result}`);
}
}
);
}
})
)(реквизит =› (
‹GoogleMap по умолчаниюZoom={10}›
{реквизиты.направления && (
‹DirectionsRenderer
направления={реквизиты.направления}
подавляющие маркеры = {реквизиты.маркеры}
/>
)}
));
return ‹DirectionsComponent /›;
}
}
экспортировать компонент googleMapComponent по умолчанию;
Основное отличие состоит в том, что теперь у нас есть новый HOC, называемый жизненным циклом, из библиотеки recompose, который получает указания после монтирования компонента. Кроме того, причина, по которой я добавил /*global google*/, заключалась в том, что я мог определить объект google в глобальном состоянии. Мои объекты Google не могли работать, если я не сделал этого.
Я надеюсь, что это поможет вам.
