使用 react-google-map 时如何适应多个圆圈？

Question

下面是我在做 react-google-map 项目时用来拟合多个标记的方法。 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)
      }
    }

我把position改成了center。

但是没有用。它只适合中心坐标，就像适合标记一样。

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

Answer 1

你应该用 google.maps.Circle.getBounds()

做一个 google.maps.LatLngBounds.union

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

proof of concept fiddle (from Google's circle example)

代码片段：

function initMap() {
  // Create the map (centered and zoomed on Chicago)
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    center: {
      lat: 41.878,
      lng: -87.629
    },
    mapTypeId: 'terrain'
  });

  var bounds = new google.maps.LatLngBounds();
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
    bounds.union(cityCircle.getBounds())
  }
  // fit the map to the circles
  map.fitBounds(bounds);
}
var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    population: 2714856
  },
  newyork: {
    center: {
      lat: 40.714,
      lng: -74.005
    },
    population: 8405837
  },
  losangeles: {
    center: {
      lat: 34.052,
      lng: -118.243
    },
    population: 3857799
  },
  vancouver: {
    center: {
      lat: 49.25,
      lng: -123.1
    },
    population: 603502
  }
};

#map,
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Answer 2

以下是我的回答：

    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)
      }
    }

使用 react-google-map 时如何适应多个圆圈？

How to fit multipe circle when using react-google-map?

javascript

google-maps-api-3

node.js

reactjs

react-google-maps