Question

我在数据层中的信息居中和放大方面遇到了麻烦。我试图使用此处建议的方法：stackoverflow question: zoom to geojson polygons bounds in Google Maps API v3。我最初还是放大到他所在的地方，有些地方在贝克岛附近的太平洋上。我正在从服务器加载GeoJson对象，它正确显示。我的代码：

function loadMap () {
    var m = document.getElementById("googleMap");
    var mapProp = { 
        disableDoubleClickZoom: true, 
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(m, mapProp);

    map.data.addListener('addfeature', function(e) {            
        var bounds = new google.maps.LatLngBounds();
        processPoints(e.feature.getGeometry(), bounds.extend, bounds);

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

    var geoJsonObject = {
        type: "FeatureCollection",
        features: [
           {
              type: "Feature",
              properties: {},
              geometry: {
                  type: "MultiPolygon",
                  coordinates: [
                      [[[-86.80795499999999, 36.146389], [-86.80605800006222, 36.14733499995285], [-86.806471, 36.147928], [-86.80836699994975, 36.14697700000941], [-86.80795499999999, 36.146389]]],
                      [[[-86.803842, 36.143921999999996], [-86.803761, 36.144005], [-86.80374600001942, 36.1441770000485], [-86.804918, 36.1458], [-86.805436, 36.145536], [-86.80621699999999, 36.146585], [-86.80755499999131, 36.145895000035935], [-86.807208, 36.145385999999995], [-86.806328, 36.144205], [-86.803842, 36.143921999999996]]]
                  ]
              }
           }
        ]
    };
    map.data.addGeoJson(geoJsonObject);
}

function processPoints(geometry, callback, thisArg) {
    if(geometry instanceof google.maps.LatLng) {
        callback.call(thisArg, geometry);
    }
}

还有其他建议吗？

Answer 1

您修改后的processPoints例程不处理多边形。

此致：

function processPoints(geometry, callback, thisArg) {
    if(geometry instanceof google.maps.LatLng) {
        callback.call(thisArg, geometry);
    }
}

来自referenced answer on SO：

function processPoints(geometry, callback, thisArg) {
    if (geometry instanceof google.maps.LatLng) {
        callback.call(thisArg, geometry);
    } else if (geometry instanceof google.maps.Data.Point) {
        callback.call(thisArg, geometry.get());
    } else {
        geometry.getArray().forEach(function (g) {
            processPoints(g, callback, thisArg);
        });
    }
}

工作代码段

window.addEventListener("load", loadMap);
var map;

function loadMap() {
  var m = document.getElementById("googleMap");
  var mapProp = {
    disableDoubleClickZoom: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(m, mapProp);
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(e) {
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);
  });

  var geoJsonObject = {
    type: "FeatureCollection",
    features: [{
      type: "Feature",
      properties: {},
      geometry: {
        type: "MultiPolygon",
        coordinates: [
          [
            [
              [-86.80795499999999, 36.146389],
              [-86.80605800006222, 36.14733499995285],
              [-86.806471, 36.147928],
              [-86.80836699994975, 36.14697700000941],
              [-86.80795499999999, 36.146389]
            ]
          ],
          [
            [
              [-86.803842, 36.143921999999996],
              [-86.803761, 36.144005],
              [-86.80374600001942, 36.1441770000485],
              [-86.804918, 36.1458],
              [-86.805436, 36.145536],
              [-86.80621699999999, 36.146585],
              [-86.80755499999131, 36.145895000035935],
              [-86.807208, 36.145385999999995],
              [-86.806328, 36.144205],
              [-86.803842, 36.143921999999996]
            ]
          ]
        ]
      }
    }, {
      type: "Feature",
      properties: {},
      geometry: {
        type: "MultiPolygon",
        coordinates: [
          [
            [
              [-86.82083, 36.148815],
              [-86.820293, 36.149196],
              [-86.819585, 36.148572],
              [-86.819971, 36.148087],
              [-86.82083, 36.148815]
            ]
          ]
        ]
      }
    }]
  };
  map.data.addGeoJson(geoJsonObject);
}

function processPoints(geometry, callback, thisArg) {
  if (geometry instanceof google.maps.LatLng) {
    callback.call(thisArg, geometry);
  } else if (geometry instanceof google.maps.Data.Point) {
    callback.call(thisArg, geometry.get());
  } else {
    geometry.getArray().forEach(function(g) {
      processPoints(g, callback, thisArg);
    });
  }
}

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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

Answer 2

请在此处查看我的回答。 https://stackoverflow.com/a/42127338/1628461

上面建议的递归处理函数很聪明，但不需要手动处理各种Geometry类型。

Maps API（至少从今天的V3.26开始）支持Data.Geometry.prototype.forEachLatLng()，它抽象出各种Geometry类型。

鉴于您已将geoJSON导入map.data，可以轻松地将地图重新缩放以适应（＆＃34;适合边界＆＃34;）：

var bounds = new google.maps.LatLngBounds(); 
map.data.forEach(function(feature){
  feature.getGeometry().forEachLatLng(function(latlng){
     bounds.extend(latlng);
  });
});

map.fitBounds(bounds);

如果您的功能已因其他原因（例如设置样式）进行了迭代，则可以将此代码用于现有循环以提高效率。

Answer 3

@ geocodezip的回答并不适合我。因为addfeature事件将触发JSON中的每个功能。这个答案告诉我们的是它将重置LatLngBounds()实例，因此重置边界框的扩展名。

我正在使用另一个名为d3.js的javascript库（非常非常方便的库btw），它提供了一个可以读取GeoJSON并生成Google地图实例所需的边界框坐标的地理类＆＃39 ; s fitBounds()方法。

myNamespace.getLogs().then(function (resp) {
    var logData = myNamespace.map.data.addGeoJson(resp);
    var jsonBounds = d3.geo.bounds(resp);
    myNamespace.mapBounds = new google.maps.LatLngBounds({
        lat: jsonBounds[0][1],
        lng: jsonBounds[0][0]
    }, {
        lat: jsonBounds[1][1],
        lng: jsonBounds[1][0]
    });
    myNamespace.map.fitBounds(myNamespace.mapBounds);
});

这将生成一对数组项，一个用于SW，另一个用于NE。例如：

Array([Array([sw_lng, sw_lat]), Array([ne_lng, ne_lat])])

放大Google地图数据图层

3 个答案: