Блог

Главная - Вопросы по программированию - Автоматическое масштабирование и автоцентр для кластерной карты Google Maps

Автоматическое масштабирование и автоцентр для кластерной карты Google Maps

#javascript #google-maps #google-maps-api-3

#javascript #google-карты #google-maps-api-3

Вопрос:

Каков наилучший способ добавить автоматическое масштабирование и автоцентровку в кластерные карты Google? В настоящее время центр и масштабирование жестко запрограммированы с конфликтами с динамически генерируемыми маркерами.

 <<div id="map"></div>
<script>

  function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: {lat: -28.024, lng: 140.887}
    });

    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    var markers = locations.map(function(location, i) {
      return new google.maps.Marker({
        position: location,
        label: labels[i % labels.length]
      });
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
  var locations = [
    {lat: -31.563910, lng: 147.154312},
    {lat: -33.718234, lng: 150.363181},
    {lat: -33.727111, lng: 150.371124},
    {lat: -33.848588, lng: 151.209834},
    {lat: -33.851702, lng: 151.216968},
    {lat: -34.671264, lng: 150.863657},
    {lat: -35.304724, lng: 148.662905},
    {lat: -36.817685, lng: 175.699196},
    {lat: -36.828611, lng: 175.790222},
    {lat: -37.750000, lng: 145.116667},
    {lat: -37.759859, lng: 145.128708},
    {lat: -37.765015, lng: 145.133858},
    {lat: -43.999792, lng: 170.463352}
  ]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYamp;callback=initMap">
</script>

Ответ №1:

Добавьте местоположения маркеров в google.maps.Объект LatLngBounds, затем вызовите map.fitBounds() с полученными границами.

 var bounds = new google.maps.LatLngBounds();
var markers = locations.map(function(location, i) {
  bounds.extend(location);
  map.fitBounds(bounds);
  //  ...

доказательство концепции скрипки

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

 function initMap() {

   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 3,
     center: {
       lat: -28.024,
       lng: 140.887
     }
   });

   var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
   var bounds = new google.maps.LatLngBounds();
   var markers = locations.map(function(location, i) {
     bounds.extend(location);
     map.fitBounds(bounds);
     return new google.maps.Marker({
       position: location,
       label: labels[i % labels.length]
     });
   });

   // Add a marker clusterer to manage the markers.
   var markerCluster = new MarkerClusterer(map, markers, {
     imagePath: 'https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/images/m' 
     // was  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
   });
 }
 var locations = [{
   lat: -31.563910,
   lng: 147.154312
 }, {
   lat: -33.718234,
   lng: 150.363181
 }, {
   lat: -33.727111,
   lng: 150.371124
 }, {
   lat: -33.848588,
   lng: 151.209834
 }, {
   lat: -33.851702,
   lng: 151.216968
 }, {
   lat: -34.671264,
   lng: 150.863657
 }, {
   lat: -35.304724,
   lng: 148.662905
 }, {
   lat: -36.817685,
   lng: 175.699196
 }, {
   lat: -36.828611,
   lng: 175.790222
 }, {
   lat: -37.750000,
   lng: 145.116667
 }, {
   lat: -37.759859,
   lng: 145.128708
 }, {
   lat: -37.765015,
   lng: 145.133858
 }, {
   lat: -43.999792,
   lng: 170.463352
 }]
 google.maps.event.addDomListener(window, "load", initMap);  
 html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}  
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js -->
<div id="map"></div>