Question

我正在尝试在google.maps.Map上居中并适应多个geojson多边形要素的边界。

请参见 non geojson fiddle，重新创建我想要的效果。

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

请参阅下面的代码和fiddle here

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对象，然后使用这些边界对地图进行拟合。

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>

Answer 2

为@MrUpsidown提供支持，以向fitBounds提供工作方法。

我要发布此答案，以显示基于@MrUpsidown答案的最终解决方案，该答案是通过loadGeoJson()使用GeoJson数据

这里是我可读的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/

使geojson多个多边形数据的边界居中并拟合

2 个答案: