добавить маршрут, гугл не определен - PullRequest
Новая
       4

добавить маршрут, гугл не определен

1 голос
/ 06 марта 2020

Я пытаюсь добавить простой маршрут в мою карту, но когда я вызываю google.maps.DirectionsService (), я получаю, что этот Google не определен, поэтому я пытаюсь добавить переменную const, но теперь сообщение об ошибке: «Не удается прочитать свойства» карты 'of undefined ..

Я не знаю, что я делаю неправильно 

const google = window.google;

class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            latitude: 0,
            longitude: 0,
            nombre_de_bars: null
        }
    }
    map() {
        const [selectedBar, setSelectedBar] = useState(null);
        const { nombre_de_bars } = this.state

        const rows = nombre_de_bars.map(bar =>
            <Marker key={bar._id}
                position={{
                    lat: bar.latitude,
                    lng: bar.longitude
                }}
                onClick={() => {
                    setSelectedBar(bar);
                }}
                icon={{
                    url: '/images/biere_logo.png',
                    scaledSize: new window.google.maps.Size(25, 25)
                }}
            />
        );
        return (
            <GoogleMap
                defaultZoom={14}
                defaultCenter={{ lat: this.state.latitude, lng: this.state.longitude }}
                defaultOptions={{
                    zoomControl: false,
                    mapTypeControl: false,
                    scaleControl: false,
                    streetViewControl: false,
                    rotateControl: false,
                    fullscreenControl: false
                }}>
                <Marker
                    position={{ lat: this.state.latitude, lng: this.state.longitude }}
                    icon={{
                        url: '/images/marker.png',
                        scaledSize: new window.google.maps.Size(50, 50)
                    }}
                />
                {rows}
                {selectedBar && (
                    <InfoWindow
                        position={{
                            lat: selectedBar.latitude,
                            lng: selectedBar.longitude
                        }}
                        onCloseClick={() => {
                            setSelectedBar(null);
                        }}
                    >
                        <div>
                            <p>{selectedBar.name}</p>
                            <p>{selectedBar.description}</p>
                            <button onClick={() => {
                                this.itineraireTo(selectedBar);
                            }}>Je m'y rend</button>
                        </div>
                    </InfoWindow>
                )}
            </GoogleMap>
        );
    }
    render() {
        const WrappedMap = withScriptjs(withGoogleMap(this.map.bind(this)));
        const DirectionsService = new google.maps.DirectionsService();
        return (
            <WrappedMap
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=MY_KEY&v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%`, width: '100%' }} />}
                containerElement={<div style={{ height: `100%`, width: '100%' }} />}
                mapElement={<div style={{ height: `100%`, width: '100%' }} />}

            />
        );
    }
}
export default Map;

Я пытаюсь экспортировать с помощью GoogleMap (Карта), но не решаю проблему.

Я прочитал документацию на tomchentw.github.io, но не возникла подобная проблема

...