Javascript 使用谷歌地图时如何拟合多个圆？

下面是当我对谷歌地图项目做出反应时，我用来拟合多个标记的方法。map.props是标记对象：

    zoomToMarkers: map => {
      if (!map) { return }
      const bounds = new window.google.maps.LatLngBounds()
      if (map.props.children[0].length !== 0) {
        map.props.children[0].forEach((child) => {
          bounds.extend(new window.google.maps.LatLng(child.props.position.lat, child.props.position.lng))
        })
        map.fitBounds(bounds)
      }
    }

现在我想适应多个圆圈，我尝试了下面的代码修改。map.props现在是圆形对象：

    zoomToMarkers: map => {
      if (!map) { return }
      const bounds = new window.google.maps.LatLngBounds()
      if (map.props.children.length !== 0) {
        map.props.children.forEach((child) => {
          bounds.extend(new window.google.maps.LatLng(child.props.center.lat, child.props.center.lng))
        })
        map.fitBounds(bounds)
      }
    }

我将

位置

更改为

中心

但它不起作用。它只适合中心坐标，就像它适合标记一样

---

我应该怎么做才能适应这个圆圈？

你应该用

google.maps.LatLngBounds.union

和

google.maps.circle.getBounds（）

代码片段：

函数initMap（）{
//创建地图（在芝加哥居中并缩放）
var map=new google.maps.map（document.getElementById（'map'）{
缩放：18，
中心：{
拉脱维亚：41.878，
液化天然气：-87.629
},
mapTypeId:'地形'
});
var bounds=new google.maps.LatLngBounds（）；
用于（城市地图中的var城市）{
//将该城市的圆圈添加到地图中。
var cityCircle=new google.maps.Circle({
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图，
中心：城市地图[城市]。中心，
半径：Math.sqrt（城市地图[城市].人口）*100
});
联合（cityCircle.getBounds（））
}
//将地图与圆圈对齐
映射边界（bounds）；
}
var citymap={
芝加哥：{
中心：{
拉脱维亚：41.878，
液化天然气：-87.629
},
人口：2714856
},
纽约：{
中心：{
纬度：40.714，
液化天然气：-74.005
},
人口：8405837
},
洛杉矶：{
中心：{
纬度：34.052，
液化天然气：-118.243
},
人口：3857799
},
温哥华：{
中心：{
拉脱维亚：49.25，
液化天然气：-123.1
},
人口：603502
}
};
#地图，
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

以下是我的答案：

    zoomToMarkers: map => {
      if (!map) { return }
      const bounds = new window.google.maps.LatLngBounds()
      if (map.props.children.length !== 0) {
        map.props.children.forEach((child) => {
          var centerCircle = new window.google.maps.Circle(child.props)
          bounds.union(centerCircle.getBounds())
        })
        map.fitBounds(bounds)
      }
    }

谢谢@geocodezip，在对你的答案做了一些调整之后，我终于让它工作了。您需要将child.props声明为圆形对象。
    zoomToMarkers: map => {
      if (!map) { return }
      const bounds = new window.google.maps.LatLngBounds()
      if (map.props.children.length !== 0) {
        map.props.children.forEach((child) => {
          var centerCircle = new window.google.maps.Circle(child.props)
          bounds.union(centerCircle.getBounds())
        })
        map.fitBounds(bounds)
      }
    }