3

Googleマップでの描画を有効にしたい（この例を参照）。ユーザーが描画を終了したら、保存ボタンをクリックしてデータベースまたはKMLファイルに描画を保存します:) ..パーツを保存する方法がわかりませんか？誰か助けてもらえますか

4

2 に答える 2

12

ここで、http：//jsfiddle.net/X66L4/1/いくつかの円を描いてみて、[保存]をクリックし、ハンドカーソルに切り替えて円を編集し、もう一度保存して変更を確認します。

円のデータを保存する例を示します。主なアイデアは、各描画タイプ（線、多角形、マーカー、円）のグローバル配列を保持し、描画マネージャーのリスナーを使用して、描画されている各タイプを検出することです（完了）。 。

  var circles = [];

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

描画されたオブジェクトへの参照全体を保存する理由は、変更の追跡を継続するためです。したがって、描画の種類ごとに配列とリスナーが必要になります。

次に、データを保存する場合（編集のたびに保存することをお勧めします）、配列を反復処理し、最小限の情報を抽出して再構築します（center、radius、path、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
});

この関数では、作成、読み取り（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-25T11:38:47.877 に答える