javascript - 添加路线，google未定义

Question

我尝试在我的地图中添加一条简单的路线，但是当我调用 google.maps.DirectionsService() 时，我得到这个 google 是未定义的，所以我尝试添加一个 const 变量，但现在错误消息是无法读取未定义的属性“地图” ..

我不知道我做错了什么

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;

我尝试使用 withGoogleMap(Map) 导出，但没有解决问题。

我阅读了 tomchentw.github.io 上的文档，但没有发生类似的问题

标签： javascriptreactjsgoogle-mapsmapsundefined