删除 movement/draggable 滚动 google 地图反应

Question

我的 React 应用程序中有一个 map.jsx 文件，其中包含以下代码：

import React from 'react';
import GoogleMapReact from 'google-map-react';
import './map.css';

const Map = ({ location, zoomLevel }) => (
    <div className='map'>
        <div className='google-map'>
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'keyID' }}
                defaultCenter={location}
                defaultZoom={zoomLevel}></GoogleMapReact>
        </div>
    </div>
);

export default Map;

然后从我的主页文件 'chatApp.jsx' 调用此组件，以便在屏幕上显示地图：

import React, { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import MapSection from '../components/map/Map';

const location = {
    address: 'House',
    lat: 53.123,
    lng: -2.123,
};

export const ChatPage = () => {
    return (
        <main className='chat-wrapper'>
            <MapSection location={location} zoomLevel={18} /> {/* include it here */}
        </main>
    );
};

我的问题是：我怎样才能阻止地图成为 dragged/scrolled 并四处移动？我希望它一直放在一个地方，图像在它上面。有没有办法在这段代码中引入边界？

Answer 1

我意识到我只需要将其添加到 google 地图参数中：

options={{ gestureHandling: 'none'}}

删除 movement/draggable 滚动 google 地图反应

Remove movement/draggable scroll on google maps react

javascript

css

google-maps

reactjs