如何在 google 映射中设置绑定 属性？

Question

请问如何使用 bounds 或 getBounds 属性在视口上显示折线？

目前我的 polyline 可见，但我需要 zoomout。我想使用绑定 属性 在不缩小的情况下在视口上显示我的线。

这是我的代码

https://stackblitz.com/edit/react-vagomb

一个解决方案是将 zoom level 8 减少到 6 它显示了部分行。

但我不想使用这个解决方案。

使用 bound 我想这样做。

this.setState({
        bounds: null,
        polyLines: [
          { lat: 28.4911778, lng: 77.080109 },
          { lat: 28.49094725, lng: 79.07986154 },
          { lat: 28.49075711, lng: 80.08011527 },
          { lat: 28.4905529, lng: 81.08038778 },
          { lat: 27.49076661, lng: 84.08063851 }
        ],
        center: {
          lat: 29.4911717,
          lng: 77.0800426
        },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter()
          });
        }

      });

有更新吗？

Answer 1

如果您想绑定折线，请使用 bounds.extend 计算范围，然后将其拟合到地图上。

const bounds = new window.google.maps.LatLngBounds();
props.polyLines.map(x => {
    bounds.extend(new window.google.maps.LatLng(x.lat, x.lng));
});
map && map.fitBounds(bounds)

在这里，我已经更新了你的代码。
https://stackblitz.com/edit/react-google-maps-bounds

希望，这对你有用！