在HTML文本区域显示Google Maps数据图层

Question

如何在HTML textarea中显示Google Maps数据图层？

我需要能够保存用户使用绘图工具对地图所做的更改。

这就是我正在做的事情。在HTML textarea的

1. 显示谷歌地图数据层
2. 当用户点击文本区域“保存地图”的内容将被保存在一个 数据库中，以便用户可以在以后的时间查看/编辑地图。

我已经添加了现有JSFiddle的代码。 JSFiddle显示第二张地图。我希望第二张地图只显示GeoJSON数据。

的jsfiddle：

jsfiddle{dot}net/mikestratton/z988k7na/  
function initialize() { 

// Create a simple map. 
    map = new google.maps.Map(document.getElementsByTagName('TD')[0].firstChild, { 
    zoom: 9, 
    center: { 
     lat: 41, 
     lng: -81 
    }, 
    disableDefaultUI: true 
    }); 
    // test result 
    map2 = new google.maps.Map(document.getElementsByTagName('TD')[1].firstChild, { 
    zoom: map.getZoom(), 
    center: map.getCenter() 
    }); 
    map2.bindTo('zoom', map, 'zoom'); 
    map2.bindTo('center', map, 'center'); 
    // END test result 
    map.data.setStyle(function(feature) { 
    if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') { 
     return { 
     visible: false 
     }; 
    } 

    return { 

    }; 
    });\ 
    // test result 
    map2.data.setStyle(function(feature) { 
    if (feature.getProperty('radius') && feature.getGeometry().getType() === 'Point') { 

     new google.maps.Circle({ 
     map: map2, 
     center: feature.getGeometry().get(), 
     radius: feature.getProperty('radius') 
     }); 
     return { 
     visible: false 
     }; 
    } 

    return { 

    }; 
    }); 
// END test result 
    map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json'); 

    google.maps.event.addListenerOnce(map.data, 'addfeature', function() { 
    var btn = document.createElement('input'); 
    btn.type = 'button'; 
    btn.value = 'save data layer to test result'; 
    google.maps.event.addDomListener(btn, 'click', function() { 
     map2.data.forEach(function(f) { 
     map2.data.remove(f); 
     }); 
     map.getGeoJson(function(geo) { 
     console.log(map2.data.addGeoJson(geo)); 
     }); 
    }); 
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(btn); 

    }); 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
    map: map, 
    drawingMode: google.maps.drawing.OverlayType.MARKER, 
    drawingControl: true, 
    drawingControlOptions: { 
     position: google.maps.ControlPosition.RIGHT_TOP, 
     drawingModes: [ 
     google.maps.drawing.OverlayType.MARKER, 
     google.maps.drawing.OverlayType.POLYGON, 
     google.maps.drawing.OverlayType.POLYLINE, 
     google.maps.drawing.OverlayType.CIRCLE, 
     google.maps.drawing.OverlayType.RECTANGLE 
     ] 
    } 
    }); 

    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.Map.prototype.getGeoJson = function(callback) { 
    var geo = { 
     "type": "FeatureCollection", 
     "features": [] 
    }, 
    fx = function(g, t) { 

     var that = [], 
     arr, 
     f = { 
      MultiLineString: 'LineString', 
      LineString: 'Point', 
      MultiPolygon: 'Polygon', 
      Polygon: 'LinearRing', 
      LinearRing: 'Point', 
      MultiPoint: 'Point' 
     }; 

     switch (t) { 
     case 'Point': 
      g = (g.get) ? g.get() : g; 
      return ([g.lng(), g.lat()]); 
      break; 
     default: 
      arr = g.getArray(); 
      for (var i = 0; i < arr.length; ++i) { 
      that.push(fx(arr[i], f[t])); 
      } 
      if (t == 'LinearRing' && 
      that[0] !== that[that.length - 1]) { 
      that.push([that[0][0], that[0][1]]); 
      } 
      return that; 
     } 
    }; 

    this.data.forEach(function(feature) { 
    var _feature = { 
     type: 'Feature', 
     properties: {} 
    } 
    _id = feature.getId(), 
     _geometry = feature.getGeometry(), 
     _type = _geometry.getType(), 
     _coordinates = fx(_geometry, _type); 

    _feature.geometry = { 
     type: _type, 
     coordinates: _coordinates 
    }; 
    if (typeof _id === 'string') { 
     _feature.id = _id; 
    } 

    geo.features.push(_feature); 
    feature.forEachProperty(function(v, k) { 
     _feature.properties[k] = v; 
    }); 
    }); 
    if (typeof callback === 'function') { 
    callback(geo); 
    } 
    return geo; 
} 


google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

您可以使用数据层.toGeoJson（）方法导出数据层的当前内容。

从the documentation：

toGeoJson（回调：函数（对象）） |返回值：无

将集合中的要素导出到GeoJSON对象。