google-maps -реакция показывает маршрут в текстовом формате, но не на карте - PullRequest
Новая
       11

google-maps -реакция показывает маршрут в текстовом формате, но не на карте

0 голосов
/ 01 апреля 2020

  • Привет, ребята, я новичок в реакции, и у меня возникают проблемы с отображением двух точек на карте. Либо он показывает карту, но не точки, либо он показывает маршрут точек в тексте. Вы можете помочь мне. Спасибо.

  • Ола песоал, не реагирует, не сталкивается с проблемами, не представляет ничего. Наибольшее количество голосов за понты, самое большое количество понтов и текстов. Подериам мне аджудар. Обригадо.

Я хотел бы видеть маршруты на карте.

Печать

Мой шрифт. 

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

const origin = {latitude: -22.9268141, longitude: -43.1849803};
const destination = {latitude: -22.921394, longitude: -43.1852807};
const GOOGLE_MAPS_APIKEY = 'XXXXXXXXXX';

export class DetalheEntregas extends Component {
  constructor(props) {
      super(props);
      this.directionsPanelRef = React.createRef();
      this.directionsDisplay = new google.maps.DirectionsRenderer();
      this.directionsService = new google.maps.DirectionsService();
    }

    componentDidMount() {
      this.directionsDisplay.setPanel(this.directionsPanelRef.current);
      this.displayRoute();
    }

    displayRoute() {
      this.request = {
        origin: "chicago, il",
        destination: "st louis, mo",
        travelMode: google.maps.TravelMode.DRIVING
      };

      this.directionsService.route(this.request, (response, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          this.directionsDisplay.setDirections(response);
        } else {
          console.log("Directions request failed due to " + status);
        }
      });
    }

    render() {
      return (
        <div>
          <div ref={this.directionsPanelRef} />
        </div>
      );
    }
}
export default GoogleApiWrapper({
  apiKey: (GOOGLE_MAPS_APIKEY)
})(DetalheEntregas)
...