react-google-maps TypeError: Object doesn't support property or method 'setZoom'

Question

我在我的应用程序中使用 react-google-maps 包。我想访问 Map.setZoom() 方法，但我得到

TypeError: Object doesn't support property or method 'setZoom'

有趣的是，Map.panTo() 方法工作得很好。它们都应该是 Map 对象的成员。

https://developers.google.com/maps/documentation/javascript/reference/3.exp/map#Map.panTo https://developers.google.com/maps/documentation/javascript/reference/3.exp/map#Map.setZoom

withHandlers(() => {
    const refs = {
      map: undefined
    }

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },

      onClick: () => () => {
        console.log("Getting location...");
        navigator.geolocation.getCurrentPosition(
          position => {
            const coords = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            console.log(coords);
            refs.map.panTo(coords);   // This line works
            refs.map.setZoom(8);      // This line throws a Type Error
          },
          error => {
            console.log("Error" + error.code);
          }
        );
      }
    }
  }),
...

这是我的整个组件定义，大致基于 react-google-maps 文档 https://tomchentw.github.io/react-google-maps/#googlemap

const Map = compose(
  withProps({
    googleMapURL: `${url}`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withHandlers(() => {
    const refs = {
      map: undefined
    }

    return {
      onMapMounted: () => ref => {
        refs.map = ref
      },

      onClick: () => () => {
        console.log("Getting location...");
        navigator.geolocation.getCurrentPosition(
          position => {
            const coords = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            console.log(coords);
            refs.map.panTo(coords);
            refs.map.setZoom(8);
          },
          error => {
            console.log("Error" + error.code);
          }
        );
      }
    }
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={4}
    defaultCenter={DefaultCoords}
    ref={props.onMapMounted}
  >
    <OverlayView
      position={DefaultCoords}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
      getPixelPositionOffset={getPixelPositionOffset}
    >
      <div style={{ background: `white`, border: `1px solid #ccc`, padding: 15 }}>
        <button onClick={props.onClick}>Use GPS</button>
      </div>
    </OverlayView>
    {props.isMarkerShown && <Marker position={DefaultCoords} />}
  </GoogleMap>
);

Answer 1

实际上 react-google-maps 库的 GoogleMap class 还没有公开 setZoom 方法。

一种解决方案是直接访问 google.maps.Map class 并设置缩放，如下所示：

1) 访问 google.maps.Map 实例：

 onMapMounted: () => ref  => {
    refs.map = ref
    refs.mapObject = ref.context[MAP];  //<-access google.maps.Map instance
 }

2) 其中 MAP 是一个常数，来自：

import {MAP} from 'react-google-maps/lib/constants'

3) 设置缩放比例：

 refs.mapObject.setZoom(8);

Demo

react-google-maps TypeError: Object doesn't support property or method 'setZoom'

react-google-maps TypeError: Object doesn't support property or method 'setZoom'

javascript

google-maps-api-3

reactjs

react-google-maps