如何在谷歌地图中设置绑定属性？答案

【问题标题】：how to set bound property in google map in react?如何在谷歌地图中设置绑定属性？
【发布时间】：2020-01-09 22:52:37
【问题描述】：

请问如何使用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()
          });
        }

      });

有什么更新吗？

【问题讨论】：

标签： reactjs google-maps google-maps-api-3 react-google-maps

【解决方案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

希望，这对你有用！

【讨论】：