zoomen zu geojson Polygonen Grenzen in Google Maps API v3

Question

Ich lade Geojson aus einer Postgis-Datenbank und möchte es auf meiner Karte anzeigen. Nach dem Zeichnen eines Polygons möchte ich, dass die Karte auf die Ausdehnung des hinzugefügten Polygons vergrößert wird.

Meine Daten werden korrekt geladen und auf der Karte korrekt angezeigt, aber ich kann nicht herausfinden, wie die Grenzen erreicht und der Zoom auf das neu hinzugefügte Polygon geändert wird. Ich habe versucht, Teile des Codes von Google Data Layer: Drag and Drop GeoJSON example, zu verwenden, aber die angezeigte Karte zoomt irgendwo im Pazifischen Ozean in der Nähe der Baker Islands, während das Polygon korrekt in Luxemburg angezeigt wird.

Hier ist der Code Ich verwende:

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

Gibt es eine Möglichkeit, dass die Arbeit zu bekommen? Es scheint, dass es keine einfache Methode gibt, die Grenzen von Polygonen in google.maps.data-layers zu erhalten.

Answer 1

Es gibt Probleme mit Ihrem gebuchten Code. Sie können map.data verwenden, um auf die Datenschicht zuzugreifen.

Arbeitscode-Snippet. Zoomt zunächst auf alle Features in GeoJSON. Zoomt beim Klicken auf jedes einzelne Polygon.

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

Hallo bitte versuchen Sie den folgenden Code, die perfekt geklappt hat, bitte die URL mit GeoJSON Dateipfad ..... dank & Antwort zurück

$.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

Die Karten ersetzen API (mindestens ab heute V3.26) unterstützt Data.Geometry.prototype.forEachLatLng(), die die verschiedenen Typen Geometry abstrahiert.

Da Sie bereits Ihre GeoJSON in map.data importiert, ist es einfach, die Karte ReZoom zu passen ("fit-to-bounds"):

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

map.fitBounds(bounds); 

Wenn sich Ihre Funktionen, die bereits für eine andere iteriert werden Grund (zB Einstellung Stile), können Sie diesen Code in Ihre vorhandene Schleife für die Effizienz arbeiten.