google-maps-api-3 - libreria - google maps options

Acércate a los límites de los polígonos geojson en la API de Google Maps v3

Question

Estoy cargando geojson desde una base de datos de Postgis y quiero mostrarlo en mi mapa. Después de dibujar un polígono, quiero que el mapa aumente la extensión del polígono agregado.

Mis datos se cargan bien y se muestran correctamente en el mapa, pero no puedo averiguar cómo obtener los límites y cambiar el zoom al polígono recién agregado. Intenté usar partes del código de la capa de datos de Google : arrastre y suelte el ejemplo de GeoJSON , pero el mapa mostrado se acerca en algún lugar del Océano Pacífico cerca de las Islas Baker, mientras que el polígono se muestra correctamente en Luxemburgo.

Aquí el código que estoy usando:

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

¿Hay alguna manera de hacer que eso funcione? Parece que no hay un método simple para obtener los límites de los polígonos en google.maps.data-layers .

Answer 1

Hay problemas con su código publicado. Puede utilizar map.data para acceder a la capa de datos.

Fragmento de código de trabajo. Inicialmente se acerca a todas las características de GeoJSON. Acerca a cada polígono individual al hacer clic.

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

Hola, intente el siguiente código que funcionó perfectamente bien, reemplace la url con la ruta del archivo geojson ... gracias y responda nuevamente

$.ajax({
  url: url,
  dataType: ''JSON'',
  success: function(data) {
    var lat = {}, lng = {};
    $(data.features).each(function(key,feature) {
      $(feature.geometry.coordinates[0]).each(function(key,val) {
        lng[''max''] = (!lng[''max''] || Math.abs(lng[''max'']) > Math.abs(val[0])) ? val[0] : lng[''max''];
        lng[''min''] = (!lng[''min''] || Math.abs(lng[''min'']) < Math.abs(val[0])) ? val[0] : lng[''min''];
        lat[''max''] = (!lat[''max''] || Math.abs(lat[''max'']) > Math.abs(val[1])) ? val[1] : lat[''max''];
        lat[''min''] = (!lat[''min''] || Math.abs(lat[''min'']) < Math.abs(val[1])) ? val[1] : lat[''min''];
      });
    });
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(new google.maps.LatLng(lat.min - 0.01, lng.min - 0.01));
    bounds.extend(new google.maps.LatLng(lat.max - 0.01, lng.max - 0.01));
    map.fitBounds(bounds);
    map.setCenter(bounds.getCenter());
  }
});

Answer 3

La API de Google Maps (al menos a partir de V3.26 hoy) es compatible con Data.Geometry.prototype.forEachLatLng() que abstrae los distintos tipos de Geometry .

Dado que ya ha importado su geoJSON en map.data , es fácil volver a ajustar el mapa para que se ajuste ("ajustar a los límites"):

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

map.fitBounds(bounds);

Si sus funciones ya están siendo iteradas por otra razón (por ejemplo, configuración de estilos), puede incluir este código en su bucle existente para mayor eficiencia.