[英]google maps API - “toGeoJson” returns object with geometry null
I'am using the google maps Drawing Layer (Library) to draw shapes on my map. 我正在使用Google Maps Drawing Layer(库)在我的地图上绘制形状。
Once finished drawing all the shapes I call "toGeoJson" function from the google maps api. 绘制完所有形状后,我从Google Maps api调用“ toGeoJson”函数。
The object i receive look like this: 我收到的对象如下所示:
object received when calling "toGeoJSON" 调用“ toGeoJSON”时收到的对象
I can't figure out what I'am doing wrong. 我不知道我在做什么错。
I am just trying to create a GeoJson out of the shapes drawn on the map. 我只是想根据地图上绘制的形状创建一个GeoJson。
I am not pasting any code because the drawing part is all done by the drawing library and the "toGeoJson" function is done by the google maps API. 我没有粘贴任何代码,因为绘图部分全部由绘图库完成,而“ toGeoJson”功能由google maps API完成。
There is no toGeoJSON
method on the drawing manager , that only exists on the Data class 绘图管理器上没有toGeoJSON
方法,仅存在于Data类上
Drawing objects on the map with the drawing manager doesn't add them to the DataLayer. 使用绘图管理器在地图上绘制对象不会将其添加到DataLayer。
You can add the objects from the drawing manager to the Data Layer, then call toGeoJson
on that. 您可以将对象从图形管理器添加到数据层,然后在其上调用toGeoJson
。
To prevent adding duplicate objects to the map, use a separate Data object, rather than the one on the map. 为防止向地图添加重复的对象,请使用单独的Data对象,而不要使用地图上的对象。
(some code from the related question: Export geoJSON data from Google Maps ) (来自相关问题的一些代码: 从Google Maps导出geoJSON数据 )
code snippet: 代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.