Сегодня я хочу рассказать, как использовать DirectionsRenderer для карт Google с помощью reactJs (версия 16.5.0).
Я создал приложение с помощью команды create-response-app.
create-react-app react-google-maps-demo cd react-google-maps-demo
У вас есть App.js.
import React, { Component } from “react”;
class App extends Component {
render() {
// return <div>App.js</div>;
}
}
export default App;
Я использовал библиотеку npm для карт реакции google-maps-react.
npm install react-google-maps --save
Запустите приложение, чтобы проверить, отображается ли приложение на http: // localhost: 3000 /.
npm run start
Теперь создайте файл под названием DirectionsIndex.js в src / components / Directions и добавьте контент отсюда.
теперь создайте файл под названием DirectionRenderComponent.js в src / components / Directions и добавьте контент отсюда.
создайте папку Утилита в папке src. проверьте эту Утилиту.
вам нужно изменить ключ api в файле /utility/constants.js.
const key = “your_key”;
export const G_API_URL = `https://maps.googleapis.com/maps/api/js?key=${key}&&v=3.exp&libraries=geometry,drawing,places`;
Вот и все. Теперь вы можете просматривать карты с маршрутами в приложении.
Я добавил один файл под названием DirectionRenderComponentPromise.js (нажмите здесь, чтобы перейти к этому файлу), который представляет собой не что иное, как асинхронную версию DirectionRenderComponent.js. (нажмите здесь, чтобы перейти к этому файлу).
Я изменил текущее местоположение на основе путевых точек, которые я получил при первом запросе. Также можно изменить реализацию, получив текущее местоположение с сервера (websocket, api, mqqt и т. Д.).
