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

问题描述

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

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.

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

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.

这里是我使用的代码:

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 中似乎没有简单的方法可以获取多边形的边界.

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.

推荐答案

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

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

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

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

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