границы центра и подгонки данных многоугольника геойсона

Question

Я пытаюсь отцентрировать и уместить границы нескольких объектов многоугольника геойсона на моем google.maps.Map.

См. не геойсон скрипка воссоздание эффекта, которого я добиваюсь.

Существует ли простая функция Google Map API 3, позволяющая делать это для данных геоджон?

См. Мой код ниже и скрипку здесь

var map;

window.initMap = function() {

    var mapProp = {
        center: new google.maps.LatLng(51.8948201,-0.7333298),
        zoom: 17,
        mapTypeId: 'satellite'
    };

    map = new google.maps.Map(document.getElementById("map"), mapProp);

    map.data.loadGeoJson('https://api.myjson.com/bins/g0tzw');

    map.data.setStyle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    var bounds = new google.maps.LatLngBounds();

    map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());

}

Мне нужны экспертные указатели на самый чистый и лучший способ приблизиться к этому.

См. Рабочую демонстрацию моего кода выше в fiddle .

http://jsfiddle.net/joshmoto/fe2vworc/

Я включил мой геоджон, чтобы вы могли видеть многоугольники на карте.

Answer 1

Переходит к @ MrUpsidown для предоставления метода работы fitBounds.

Я публикую этот ответ, чтобы показать мое окончательное решение на основе @ MrUpsidown ответ с использованием данных GeoJson через loadGeoJson()

Вот мой читаемый GeoJson здесь http://myjson.com/g0tzw

// initiate map
window.initMap = function() {

    // permits json
    var permits = 'https://api.myjson.com/bins/g0tzw';

    // map properties
    var mapProp = {
        zoom: 17,
        mapTypeId: 'satellite'
    };

    // google map object
    var map = new google.maps.Map(document.getElementById("map"), mapProp);

    // load GeoJSON.
    map.data.loadGeoJson(permits, null, function () {

        // create empty bounds object
        var bounds = new google.maps.LatLngBounds();

        // loop through features
        map.data.forEach(function(feature) {

            var geo = feature.getGeometry();

            geo.forEachLatLng(function(LatLng) {
                bounds.extend(LatLng);
            });

        });

        // fit data to bounds
        map.fitBounds(bounds);

    });

    // map data styles
    map.data.setStyle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

}

Я звоню initMap через ...

 <script async defer src="https://maps.googleapis.com/maps/api/js?key=<?=$gmap_api?>&callback=initMap"></script>

Смотрите рабочую демонстрацию здесь.

http://jsfiddle.net/joshmoto/eg3vj17m/

Answer 2

Вот краткий пример того, как вы можете получить границы своих функций.Это просто получит границы для каждого объекта, расширит объект LatLngBounds, а затем подгонит карту под эти границы.

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 10,
    center: {
      lat: 0,
      lng: 0
    }
  });

  var permits = {
    type: "FeatureCollection",
    id: "permits",
    features: [{
        type: "Feature",
        properties: {
          name: "Alpha Field"
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-0.72863, 51.895995],
              [-0.730022, 51.896766],
              [-0.730754, 51.896524],
              [-0.731234, 51.896401],
              [-0.731832, 51.896294],
              [-0.732345, 51.896219],
              [-0.732945, 51.896102],
              [-0.732691, 51.895774],
              [-0.732618, 51.895531],
              [-0.732543, 51.895359],
              [-0.73152, 51.894751],
              [-0.731037, 51.894488],
              [-0.730708, 51.894324],
              [-0.72863, 51.895995]
            ]
          ]
        }
      },
      {
        type: "Feature",
        properties: {
          name: "Beta Field"
        },
        geometry: {
          type: "Polygon",
          coordinates: [
            [
              [-0.728004, 51.895658],
              [-0.72863, 51.895995],
              [-0.730708, 51.894324],
              [-0.731217, 51.893784],
              [-0.730992, 51.893709],
              [-0.730793, 51.893567],
              [-0.730734, 51.893435],
              [-0.730761, 51.89333],
              [-0.729696, 51.893244],
              [-0.729391, 51.89314],
              [-0.729249, 51.893586],
              [-0.728991, 51.894152],
              [-0.728525, 51.894983],
              [-0.728004, 51.895658]
            ]
          ]
        }
      }
    ]
  };

  google.maps.event.addListenerOnce(map, 'idle', function() {

    // Load GeoJSON.
    map.data.addGeoJson(permits);

    // Create empty bounds object
    var bounds = new google.maps.LatLngBounds();

    // Loop through features
    map.data.forEach(function(feature) {

      var geo = feature.getGeometry();

      geo.forEachLatLng(function(LatLng) {

        bounds.extend(LatLng);
      });
    });

    map.fitBounds(bounds);
  });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>