geojson多多边形数据的中心和拟合边界

Question

我正在尝试将多个 geojson 多边形特征的边界居中并适合我的google.maps.Map.

请参阅这个非 geojson 小提琴，重新创建我想要的效果。

是否有一个简单的 Google Map API 3 函数可以对 geojson 数据执行此操作？

请参阅下面的我的代码并在这里摆弄

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/

我已将 geojson 内联包含在内，以便您可以在地图上看到多边形。

Answer 1

这是一个如何获得功能边界的简单示例。这将仅获取每个要素边界，扩展LatLngBounds对象，然后使地图适合这些边界。

let map;

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

  const 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
    let bounds = new google.maps.LatLngBounds();

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

      let geo = feature.getGeometry();

      geo.forEachLatLng(function(LatLng) {

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

    map.fitBounds(bounds);
  });
}

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>