如何保存地图绘制状态（多边形，折线，标记）(How to save map drawing stat

我想启用借鉴谷歌地图等（请参见本例）当用户完成图纸，他会点击保存按钮，他的绘画保存数据库或KML文件，什么:) ..我不知道如何保存一部分？谁能帮我

Answer 1:

在这里， http://jsfiddle.net/X66L4/1/试着画一些圈子里，点击保存，然后切换到手动光标编辑圈，并再次保存看到的变化。

我示出了示例，以节省圈子数据，其主要思想是保持对各图型（线，多边形，标记，圆圈）的全局阵列，并且使用侦听所述绘制管理器，以检测每个类型的被吸入（完成）。

  var circles = [];

  google.maps.event.addDomListener(drawingManager, 'circlecomplete', 
    function(circle) {
      circles.push(circle);
    });

拯救整个参照绘制的对象的原因是为了继续跟踪更改。所以，你需要为每种类型的绘图阵列和监听。

然后，当你要保存的数据（你可能会希望在每次编辑这样做），通过数组，并将提取的最少信息来重建它（圆心，半径，路径的latLng，等等。）

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
var myOptions = {
  center: new google.maps.LatLng(-25,177.5),
  zoom: 3,
  mapTypeId: google.maps.MapTypeId.SATELLITE
};


    var map;

    function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.CIRCLE,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
      },
      circleOptions: {
        editable: true
      }
    });

      drawingManager.setMap(map);
      var circles = [];

      google.maps.event.addDomListener(drawingManager, 'circlecomplete', function(circle) {
        circles.push(circle);
      });

      google.maps.event.addDomListener(savebutton, 'click', function() {
        document.getElementById("savedata").value = "";
        for (var i = 0; i < circles.length; i++) {
          var circleCenter = circles[i].getCenter();
          var circleRadius = circles[i].getRadius();
          document.getElementById("savedata").value += "circle((";
          document.getElementById("savedata").value += 
            circleCenter.lat().toFixed(3) + "," + circleCenter.lng().toFixed(3);
          document.getElementById("savedata").value += "), ";
          document.getElementById("savedata").value += circleRadius.toFixed(3) + ")\n";

        }
      });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <button id="savebutton">SAVE</button>
    <textarea id="savedata" rows="8" cols="40"></textarea>
    <div id="map_canvas"></div>
  </body>
</html>

Answer 2:

根据我的经验，它更容易使用地图的数据层，然后绘制经理。试试这个小提琴。

FiddleLink

显示的控件：

map.data.setControls(['Polygon']);
map.data.setStyle({
    editable: true,
    draggable: true
});

在此功能，您可以看到创建，读取（localStorage的）和删除（不按顺序）：

function loadPolygons(map) {
var data = JSON.parse(localStorage.getItem('geoData'));

map.data.forEach(function (f) {
    map.data.remove(f);
});
console.log(data);
map.data.addGeoJson(data)
}