Как разместить несколько кругов при использовании response-google-map? - PullRequest
Новая
       35

Как разместить несколько кругов при использовании response-google-map?

0 голосов
/ 28 января 2019

Ниже приведен способ, которым я использую для размещения нескольких маркеров, когда я делаю проекты в соответствии с 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.

Но это не сработало.Он подходит только к центральной координате, как к маркерам.

Что я должен сделать, чтобы соответствовать кругу?

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Ниже мой ответ: 

    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)
      }
    }
0 голосов
/ 28 января 2019

Вы должны сделать google.maps.LatLngBounds.union с google.maps.Circle.getBounds()

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

доказательством концепции скрипки (из примера круга Google)

кодафрагмент: 

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>
...