无法与react中的谷歌地图交互

Question

我正在使用谷歌地图 API '@vis.gl/react-google-maps'。我观看了一些教程，并做了同样的事情来在屏幕上获取谷歌地图以及一些方向及其航点。但我无法在地图窗口上用鼠标滚动缩放或拖动。 是的，我确实按 ctrl 并滚动来放大和缩小，但仍然不起作用。

这是我的代码：

import { APIProvider, Map, useMap, useMapsLibrary } from '@vis.gl/react-google-maps';
import { useEffect, useState, useRef } from 'react';

export default function BusMap() {
    const position = { lat: 43.6532, lng: -79.3832 };

    return (
        <div className='h-screen w-[60%]'>
            <APIProvider apiKey={'API_KEY'}>
                <Map
                    center={position}
                    zoom={10}
                    mapId={'MAP_ID'}
                >
                </Map>
                <Directions />
            </APIProvider>
        </div>
    );
}

function Directions() {
    const map = useMap();
    const routesLibrary = useMapsLibrary('routes');
    const [directionsService, setDirectionsService] = useState(null);
    const [directionsRenderer, setDirectionsRenderer] = useState(null);
    const [routes, setRoutes] = useState([]);

    useEffect(() => {
        if (!routesLibrary || !map) return;

        setDirectionsService(new routesLibrary.DirectionsService());
        setDirectionsRenderer(new routesLibrary.DirectionsRenderer({ map }));
    }, [routesLibrary, map]);

    useEffect(() => {
        if (!directionsService || !directionsRenderer) return;

        // Define waypoints here
        const waypoints = [
            {
                location: new window.google.maps.LatLng(43.7001, -79.4163), // Example waypoint
                stopover: true, // Whether to stop at this waypoint
            },
            {
                location: new window.google.maps.LatLng(43.6001, -79.4000), // Another example waypoint
                stopover: true,
            }
        ];

        directionsService.route({
            origin: '43.814587, -79.118627',
            destination: '43.518791, -79.655286',
            travelMode: window.google.maps.TravelMode.DRIVING,
            waypoints: waypoints, // Add waypoints here
            provideRouteAlternatives: true,
        }).then(response => {
            directionsRenderer.setDirections(response);
            setRoutes(response.routes);
        }).catch(error => {
            console.error('Error fetching directions:', error);
        });
    }, [directionsService, directionsRenderer]);

    console.log(routes);

    return null;
}

我尝试重新启动应用程序，甚至启动另一个应用程序..仍然出现错误。

Answer 1

您需要确保启用用户交互的地图选项

<Map
  center={position}
  zoom={10}
  mapId={'MAP_ID'}
  options={{
    zoomControl: true,
    scrollwheel: true,
    draggable: true,
  }}
>
</Map>

在此处查找更多配置