google maps API - "toGeoJson" renvoie un objet avec une géométrie nulle

Question

J'utilise le calque de dessin Google Maps (Bibliothèque) pour dessiner des formes sur ma carte. Une fois fini de dessiner toutes les formes, j'appelle la fonction "toGeoJson" de l'API Google Maps.

L'objet que je reçois ressembler à ceci:

object received when calling "toGeoJSON"

Je ne peux pas comprendre ce que I'am faire le mal. J'essaye juste de créer un GeoJson hors des formes dessinées sur la carte.

Je ne colle pas de code car la partie dessin est entièrement réalisée par la bibliothèque de dessins et la fonction "toGeoJson" est réalisée par l'API google maps.

Answer 1

Il n'y a pas de méthode toGeoJSON sur la drawing manager, qui existe uniquement sur les Data class

objets de dessin sur la carte avec le gestionnaire de dessin ne pas les ajouter à la couche de données.

Vous pouvez ajouter les objets du gestionnaire de dessin au calque de données, puis appeler le toGeoJson pour cela.

proof of concept fiddle

(un code de la question connexe: Export geoJSON data from Google Maps)

extrait de code:

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>