如何保存地图绘制状态（多边形、折线、标记）

Question

如何保存地图绘制状态（多边形、折线、标记）

google-maps-api-3drawingkml

4

我希望能在Google地图上启用绘图功能，就像(这个例子)一样。当用户完成绘图后，他将点击保存按钮将其绘图保存在数据库或KML文件中，任何格式都可以 :) .. 我不知道如何实现保存部分？有人能帮我吗？

- mohd khanfer

2个回答

6

根据我的经验，使用地图的dataLayer比使用绘图管理器更容易。可以尝试使用这个代码片段： 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)
}

- Rui Silva

你很棒！这要简单得多了！ - Miguel Laborde

1

这种方法的缺点是您只能使用“Polygon”、“Point”、“LineString”进行绘制，而不能使用Drawing Manager库中的圆形和矩形。Google地图的map.data层不支持绘制圆形和矩形。 - Aman Mohammed

你是完全正确的。但我认为这个问题并没有涉及到圆形。在我看来，这只是一种简单的方法来解决最简单的方案。 - Rui Silva

仅用于保存和加载多边形，这个解决方案非常棒。非常简单明了，绝对直截了当。 - Elazar Zadiki

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tina CG Hoehr · Accepted Answer

在这里，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>