React Google 地图缩放不起作用 - 双击或 + - 不起作用

Question

import { APIProvider, Map, Pin } from "@vis.gl/react-google-maps";

export default function ModalMapComponent({ lat, lng, width, zoom }: any) {
  return (
    <div className={`overflow-hidden rounded-md w-[${width}] h-[250px]`}>
      <APIProvider apiKey="">
        <Map center={{ lat, lng }} zoom={10} styles={gMapStyle}>
        </Map>
      </APIProvider>
    </div>
  );
}

当我双击或单击地图上的 + 或 - 符号时，地图不会放大或缩小。设置为 10。我怎样才能让人们缩放？

Answer 1

import { APIProvider, Map } from "@vis.gl/react-google-maps";

export default function ModalMapComponent({ lat, lng, width, zoom }: any) {
  return (
    <div style={{ width: `${width}`, height: '250px' }} className="overflow-hidden rounded-md">
      <APIProvider apiKey="">
        <Map 
          center={{ lat, lng }} 
          zoom={zoom} 
          styles={gMapStyle} 
          options={{ gestureHandling: 'auto' }}
          onZoomChanged={(event) => {
            const newZoom = event.target.getZoom();
            console.log('Zoom level changed to:', newZoom);
          }}
        >
        </Map>
      </APIProvider>
    </div>
  );
}

此代码定义了一个名为

ModalMapComponent

的 React 组件，它使用

@vis.gl/react-google-maps

库集成了 Google 地图。它需要四个属性：纬度 (

lat

)、经度 (

lng

)、宽度和缩放级别。该组件渲染一个

div

作为地图的容器，具有基于

width

属性的动态宽度和 250 像素的固定高度。在此容器内，

APIProvider

组件用于提供渲染地图所需的 Google Maps API 密钥。

Map

组件配置有中心坐标、初始缩放级别和自定义样式。它还包括将

gestureHandling

设置为“

auto

”的选项，允许用户使用双击或捏合手势来放大和缩小。此外，还有一个

onZoomChanged

的事件处理程序，每当新的缩放级别发生变化时，它都会将其记录到控制台。总的来说，这段代码创建了一个功能性和交互式的 Google 地图组件，可以在 React 应用程序中轻松重用。

我认为我的代码可以解决问题，或者您可以向我提供更多详细信息和您的目标以改进我的答案。