Javascript react google maps TypeError:对象不'；t支持属性或方法'；setZoom'；

我正在我的应用程序中使用

react谷歌地图

软件包。我想访问Map.setZoom（）方法，但我得到了

TypeError:对象不支持属性或方法“setZoom”

有趣的是，

Map.panTo（）

方法工作得很好。它们都应该是映射对象的成员

这是我的整个组件定义，松散地基于

react google maps

文档

const Map=compose(
用道具({
googleMapURL:`${url}`，
加载元素：，
集装箱运输：，
mapElement:，
}),
withHandlers（（）=>{
常数参考={
地图：未定义
}
返回{
onMapMounted:（）=>ref=>{
refs.map=ref
},
onClick:（）=>（）=>{
日志（“获取位置…”）；
navigator.geolocation.getCurrentPosition(
位置=>{
常数坐标={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
控制台日志（coords）；
参考panTo地图（coords）；
参考地图设置缩放（8）；
},
错误=>{
console.log（“错误”+错误代码）；
}
);
}
}
}),
用ScriptJS，
用谷歌地图
)（（道具）=>
使用全球定位系统
{props.ismarkersown&}
);

事实上，

react谷歌地图
库尚未公开
setZoom
方法

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

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

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

似乎没有
setZoom
方法。只有一种。除非我严重误解了什么。你是对的，它存在于普通的谷歌地图上，但不存在于
react谷歌地图组件上。
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>
);

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

 refs.mapObject.setZoom(8);