在Google Maps API v3中缩放到geojson多边形边界

Question

我正在从Postgis数据库加载geojson,并希望在我的地图上显示它.绘制多边形后,我希望地图缩放到添加的多边形的范围.

我的数据加载正常并在地图上显示正确,但我无法弄清楚如何获取边界并将缩放更改为新添加的多边形.我尝试使用Google 数据层中的部分代码 :拖放GeoJSON示例,但显示的地图放大到靠近贝克群岛的太平洋某处,而多边形在卢森堡正确显示.

这里是我使用的代码:

window.addEventListener("load", func1);

function func1(){
  //Load mapdata via geoJson
  var parzelle = new google.maps.Data();
  parzelle.loadGeoJson("./mapdata/get_parzelle_geojson.php<?php echo  "?gid=".$_GET['gid'];?>");

  // Set the stroke width, and fill color for each polygon
  var featureStyle = {
    fillColor: '#ADFF2F',
    fillOpacity: 0.1,
    strokeColor: '#ADFF2F',
    strokeWeight: 1
  }

  parzelle.setStyle(featureStyle);
  parzelle.setMap(map);

  zoom(map);
}

function zoom(map) {
  var bounds = new google.maps.LatLngBounds();
  map.data.forEach(function(feature) {
    processPoints(feature.getGeometry(), bounds.extend, bounds);
  });
  map.fitBounds(bounds);
}

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);
    });
  }
}

有没有办法让它工作？似乎没有简单的方法来获取多边形的边界google.maps.data-layers.

Answer 1

您发布的代码存在问题.您可以使用map.data访问数据层.

工作代码段.最初缩放到GeoJSON中的所有功能.单击缩放到每个单独的多边形.

window.addEventListener("load", func1);
var map;

function func1() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {
      lat: 0,
      lng: 0
    }
  });
  // Set the stroke width, and fill color for each polygon
  var featureStyle = {
    fillColor: '#ADFF2F',
    fillOpacity: 0.1,
    strokeColor: '#ADFF2F',
    strokeWeight: 1
  };

  // zoom to show all the features
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(e) {
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);
  });

  // zoom to the clicked feature
  map.data.addListener('click', function(e) {
    var bounds = new google.maps.LatLngBounds();
    processPoints(e.feature.getGeometry(), bounds.extend, bounds);
    map.fitBounds(bounds);
  });
  //Load mapdata via geoJson
  map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
}

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,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Answer 2

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

鉴于您已经将geoJSON导入map.data,可以轻松地将地图重新​​缩放以适合("适合边界"):

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

map.fitBounds(bounds);

如果由于其他原因(例如设置样式)已经迭代了您的功能,则可以将此代码用于现有循环以提高效率.