google maps API-“ toGeoJson”返回幾何為null的對象

Question

我正在使用Google Maps Drawing Layer（庫）在我的地圖上繪制形狀。

繪制完所有形狀后，我從Google Maps api調用“ toGeoJson”函數。

我收到的對象如下所示：

調用“ toGeoJSON”時收到的對象

我不知道我在做什么錯。

我只是想根據地圖上繪制的形狀創建一個GeoJson。

我沒有粘貼任何代碼，因為繪圖部分全部由繪圖庫完成，而“ toGeoJson”功能由google maps API完成。

Answer 1

繪圖管理器上沒有toGeoJSON方法，僅存在於Data類上

使用繪圖管理器在地圖上繪制對象不會將其添加到DataLayer。

您可以將對象從圖形管理器添加到數據層，然后在其上調用toGeoJson 。

為防止向地圖添加重復的對象，請使用單獨的Data對象，而不要使用地圖上的對象。

概念證明

（來自相關問題的一些代碼： 從Google Maps導出geoJSON數據 ）

代碼段：

 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); var dataLayer = new google.maps.Data(); // 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: dataLayer.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() } ] dataLayer.add(new google.maps.Data.Feature({ geometry: new google.maps.Data.Polygon([p]) })); break; case google.maps.drawing.OverlayType.POLYGON: dataLayer.add(new google.maps.Data.Feature({ geometry: new google.maps.Data.Polygon([event.overlay.getPath().getArray()]) })); break; case google.maps.drawing.OverlayType.POLYLINE: dataLayer.add(new google.maps.Data.Feature({ geometry: new google.maps.Data.LineString(event.overlay.getPath().getArray()) })); break; case google.maps.drawing.OverlayType.CIRCLE: dataLayer.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() { dataLayer.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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <input id="save" value="save" type="button" /> <div id="geojson"></div> <div id="map"></div>