缩放到Google Maps API v3中的geojson多边形边界 [英] zoom to geojson polygons bounds in Google Maps API v3

问题描述

我从Postgis数据库加载geojson，并希望在我的地图上显示它。
在绘制多边形后，我希望地图可以放大到添加的多边形的范围。

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

这里是我使用的代码：

 窗口.addEventListener（load，func1）; 
 $ b $函数func1（）{
 //通过geoJson加载mapdata 
 var parzelle = new google.maps.Data（）; 
 parzelle.loadGeoJson（./ mapdata / get_parzelle_geojson.php<？php echo？gid =。$ _ GET ['gid'];？>）; 
 
 //设置笔画宽度并为每个多边形填充颜色
 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）; 
 
 
函数processPoints（几何，回调，thisArg）{
 if（几何实例google.maps.LatLng）{
 callback.call（thisArg，几何） ; 
} else if（geometry instanceof google.maps.Data.Point）{
 callback.call（thisArg，geometry.get（））; 
} else {
 geometry.getArray（）。forEach（function（g）{
 processPoints（g，callback，thisArg）; 
}）; 
 
 
 
 
 $ b 
有没有办法让这个工作起作用？似乎没有简单的方法来获取 google.maps.data-layers 中的多边形边界。
解决方案
您的发布代码存在问题。您可以使用map.data访问数据层。
 
 
 
工作代码片段。最初缩放到GeoJSON中的所有功能。点击时缩放每个单独的多边形。
 
 
 
 
 
 

html，body，＃map-canvas {height ：100％;宽度：100％; margin：0px; < script src =https：//

I'm loading geojson from a Postgis-database and want to display it on my map. After drawing a polygon, I want the map to zoom to the extents of the added polygon.

My data loads fine and displays correct on the map, but I cannot figure out how to get the bounds and change the zoom to the newly added polygon. I tried to use parts of the code from Google's Data Layer: Drag and Drop GeoJSON example, but the displayed map zooms in somewhere in the Pacific Ocean close to the Baker Islands, while the polygon is displayed correctly in Luxembourg.

Here the code I am using:

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

Is there a way to get that to work? It seems that there is no simple method to get the bounds of polygons in google.maps.data-layers.

解决方案

There are issues with your posted code. You can use map.data to access the data layer.

Working code snippet. Initially zooms to all the features in the GeoJSON. Zooms to each individual polygon on click.

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>

这篇关于缩放到Google Maps API v3中的geojson多边形边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！