代码之家 › 专栏 › 技术社区 › user944513

如何在react中设置google地图的绑定属性?

react-google-maps google-maps reactjs

user944513 · 技术社区 · 6 年前

你能告诉我怎样在视窗上显示多段线吗 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()
          });
        }

      });

有什么更新吗?

0 回复 | 直到 6 年前

user11910739 user11910739 6 年前

如果要绑定多段线,请使用 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

希望,这对你有用!

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前