如何保存地图绘制状态（多边形，折线，标记） [英] How to save map drawing state (Polygon, Polyline, Markers)
问题描述
我想在Google地图上启用绘图，例如（看到此内容例如）
当用户完成绘图时，他会点击保存按钮将他的绘图保存在数据库或KML文件中，任何东西:) ..我不知道如何保存部分？任何人都可以帮助我
在这里， http://jsfiddle.net/X66L4/1/ 尝试绘制一些圆圈，点击保存，然后通过切换到手形光标并再次保存以查看更改来编辑圆圈。
我举一个例子来保存圈子的数据，主要思想是为每个绘图类型（线，多边形，标记，圆）保留一个全局数组，并使用绘图管理器上的侦听器来检测绘制的每种类型（完成）。
var circles = [];
google.maps.event.addDomListener（drawingManager，'circlecomplete'，
function（circle）{
circles.push（circle）;
}）;
将整个引用保存到绘制对象的原因是继续跟踪更改。所以你需要一个数组和监听器来处理每种类型的图形。
然后，当你想保存数据时（你可能希望在每次编辑时都这么做），遍历数组并提取最小信息来重建它（center，radius，path，latLng等）。pre $ $ $ $ $ $ <！DOCTYPE html>
< html>
< head>
< style type =text / css>
html，body，#map_canvas {margin：0;填充：0;身高：100％}
< / style>
< script type =text / javascriptsrc =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;
函数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 ：{
位置：google.maps.ControlPosition.TOP_CENTER，
drawingModes：[google.maps.drawing.OverlayType.CIRCLE]
}，
circleOptions：{
可编辑：真
}
}）;
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（）; $ b $ （）; $ 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 =savedatarows =8cols =40>< / textarea>
< div id =map_canvas>< / div>
< / body>
< / html>
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
Here, http://jsfiddle.net/X66L4/1/ try drawing some circles, click on SAVE, then edit the circles by switching to the hand cursor and SAVE again to see the changes.
I show an example to save circles' data, the main idea is to keep a global array for each drawing type (line, polygon, marker, circle), and use a listener on the drawing manager to detect each type being drawn (complete).
var circles = [];
google.maps.event.addDomListener(drawingManager, 'circlecomplete',
function(circle) {
circles.push(circle);
});
The reason to save the entire reference to the drawn object is to continue tracking changes. So you will need an array and listener for each type of drawing.
Then, when you want to save the data (you may wish to do so at every edit), iterate through the arrays and extract the minimum information to rebuild it (center, radius, path, latLng, and so on.)
<!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>
这篇关于如何保存地图绘制状态（多边形，折线，标记）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
