3

I want to enable drawing on Google Maps like (see this example) When user finish with drawings he will click on save button to save his drawings in Database or KML file, anything :) .. I do not know how to the save part? Could anyone help me

4

2 回答 2

12

在这里，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>
于 2012-06-01T22:44:44.003 回答
4

根据我的经验，使用地图的 dataLayer 比使用绘图管理器更容易。试试这个小提琴。

FiddleLink

显示控件：

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

在此函数中，您可以看到 Create、Read (localStorage) 和 Remove（不是按此顺序）：

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)
}
于 2016-10-25T11:38:47.877 回答