google maps API - "toGeoJson" gibt Objekt mit Geometrie null zurück

Question

Ich benutze die Google Maps-Zeichnungsschicht (Bibliothek), um Formen auf meiner Karte zu zeichnen.

Sobald fertig mit dem Zeichnen aller Formen, rufe ich "toGeoJson" -Funktion von der Google Maps API.

Das Objekt i sehen wie folgt erhalten:

object received when calling "toGeoJSON"

ich kann nicht herausfinden, was Ich bin falsch.

Ich versuche nur, ein GeoJson aus den auf der Karte gezeichneten Formen zu erstellen.

Ich kleben keinen Code, weil der Zeichnungsteil von der Zeichnungsbibliothek erledigt wird und die "toGeoJson" -Funktion von der Google Maps API erledigt wird.

Answer 1

Es gibt keine toGeoJSON Methode auf den drawing manager, dass nur an dem Manager Data class

Zeichnung Objekte auf der Karte mit der Zeichnung existiert nicht, sie nicht zu dem Datalayer hinzuzufügen.

Sie können die Objekte aus dem Zeichnungsmanager zur Datenschicht hinzufügen und dann toGeoJson aufrufen.

proof of concept fiddle

(aus dem Code der damit verbundene Frage: Export geoJSON data from Google Maps)

Code-Schnipsel:

function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 

 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [ 
 
     google.maps.drawing.OverlayType.MARKER, 
 
     google.maps.drawing.OverlayType.CIRCLE, 
 
     google.maps.drawing.OverlayType.POLYGON, 
 
     google.maps.drawing.OverlayType.POLYLINE, 
 
     google.maps.drawing.OverlayType.RECTANGLE 
 
     ] 
 
    }, 
 
    markerOptions: { 
 
     icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png' 
 
    }, 
 
    circleOptions: { 
 
     fillColor: '#ffff00', 
 
     fillOpacity: 1, 
 
     strokeWeight: 5, 
 
     clickable: false, 
 
     editable: true, 
 
     zIndex: 1 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 

 
    // from https://stackoverflow.com/questions/25072069/export-geojson-data-from-google-maps 
 
    // from http://jsfiddle.net/doktormolle/5F88D/ 
 
    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) { 
 
    switch (event.type) { 
 
     case google.maps.drawing.OverlayType.MARKER: 
 
     map.data.add(new google.maps.Data.Feature({ 
 
      geometry: new google.maps.Data.Point(event.overlay.getPosition()) 
 
     })); 
 
     break; 
 
     case google.maps.drawing.OverlayType.RECTANGLE: 
 
     var b = event.overlay.getBounds(), 
 
      p = [b.getSouthWest(), { 
 
       lat: b.getSouthWest().lat(), 
 
       lng: b.getNorthEast().lng() 
 
      }, 
 
      b.getNorthEast(), { 
 
       lng: b.getSouthWest().lng(), 
 
       lat: b.getNorthEast().lat() 
 
      } 
 
      ] 
 
     map.data.add(new google.maps.Data.Feature({ 
 
      geometry: new google.maps.Data.Polygon([p]) 
 
     })); 
 
     break; 
 
     case google.maps.drawing.OverlayType.POLYGON: 
 
     map.data.add(new google.maps.Data.Feature({ 
 
      geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()]) 
 
     })); 
 
     break; 
 
     case google.maps.drawing.OverlayType.POLYLINE: 
 
     map.data.add(new google.maps.Data.Feature({ 
 
      geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray()) 
 
     })); 
 
     break; 
 
     case google.maps.drawing.OverlayType.CIRCLE: 
 
     map.data.add(new google.maps.Data.Feature({ 
 
      properties: { 
 
      radius: event.overlay.getRadius() 
 
      }, 
 
      geometry: new google.maps.Data.Point(event.overlay.getCenter()) 
 
     })); 
 
     break; 
 
    } 
 

 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('save'), 'click', function() { 
 
    map.data.toGeoJson(function(obj) { 
 
     document.getElementById('geojson').innerHTML = JSON.stringify(obj); 
 
    }); 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing"></script> 
 
<input id="save" value="save" type="button" /> 
 
<div id="geojson"></div> 
 
<div id="map"></div>