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

我想在Google地图上启用绘图，如（see this example）当用户使用绘图完成时，他将点击保存按钮以将他的绘图保存在数据库或KML文件中，任何东西:) ..我不知道如何保存部分？任何人都可以帮我如何保存地图绘制状态（多边形，多段线，标记）

来源

2012-06-01 mohd khanfer

在这里，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-01 22:44:44

是，我的想法是逐个创建每个项目，所以由您决定如何组织JSON/XML。我只是认为，当你加载数据时，每个项目应该像以前一样可编辑。 –

是的，实际上我已经有了一个C＃类，它通过连接一组位置点来生成KML文件。我会做另一种从这些对象创建KML的方法。并感谢你的帮助 –

你采取了一个简单的例子，采取循环。请让我们知道采取适当的POLYGON –

根据我的经验，使用map的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) 
}

来源

2016-10-25 11:38:47

你真棒！这是waaay更简单！ –

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

回答

相关问题