react-google-maps fitBounds 和 panToBounds 不缩放地图答案

【问题标题】：react-google-maps fitBounds and panToBounds does not scale the mapreact-google-maps fitBounds 和 panToBounds 不缩放地图
【发布时间】：2019-12-26 15:17:54
【问题描述】：

const Map = withGoogleMap(props => {
  const { activeMarker, zoom, center, showInfoWindow, products } = props;
  const [selectedPlace, setSelectedPlace] = useState(null);

  // Iterate items to size, center, and zoom map to contain all markers
  const fitB = () => {
    let bounds = new window.google.maps.LatLngBounds();
    console.log({ bounds });
    products &&
      products.map(place => {
        bounds.extend({
          lat: parseFloat(place.latitude),
          lng: parseFloat(place.longitude)
        });
      });

    console.log({ extended: bounds });

    return bounds;
  };

  return (
    <GoogleMap
      defaultOptions={{
        styles: MapTheme,
        zoomControl: true,
        zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
        },
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        rotateControl: false,
        fullscreenControl: true
      }}
      panToBounds={{ latLngBounds: () => fitB() }}
      fitBounds={{ latLngBounds: () => fitB() }}
      zoom={zoom}
      center={center}
    >
      {products.map(bc => (
        <Marker
          key={bc.id}
          position={{
            lat: parseFloat(bc.latitude),
            lng: parseFloat(bc.longitude)
          }}
          icon={{
            url: bc.id == activeMarker ? BC_MARKER_ACTIVE : BC_MARKER,
            scaledSize: new window.google.maps.Size(20, 20)
          }}
        />
      ))}
    </GoogleMap>
  );
});

我将 react-google-maps 用于地图，而 fitBounds/panToBounds 的默认道具似乎根本没有设置地图的边界。

至于代码。 fitBounds/panToBounds 道具似乎根本没有调用 fitB() 方法。

我想使用 Google Map 的 fitBounds 方法调整地图大小以放大并适合标记

【问题讨论】：

标签： javascript reactjs google-maps react-google-maps

【解决方案1】：

它不起作用，因为fitBounds() 是一种方法，而不是 GoogleMap 的属性。 panToBounds() 也是如此。您需要设置地图参考的边界。

例如：

const refs = {}

onMapMounted: ref => {
  refs.map = ref;
}

那么你可以这样做：

let bounds = new window.google.maps.LatLngBounds();
bounds.extend({
  lat: parseFloat(place.latitude),
  lng: parseFloat(place.longitude)
});
refs.map.fitBounds(bounds);

使用图书馆的文档获得指导：https://tomchentw.github.io/react-google-maps/

希望这会有所帮助！

【讨论】：