Comment faire pour enregistrer le dessin de carte de l'état (Polygones, Polylignes, les Marqueurs)

Je veux l'activer en appuyant sur Google Maps (voir cet exemple)
Lorsque l'utilisateur a fini avec les dessins, il va cliquer sur le bouton enregistrer pour enregistrer ses dessins dans la Base de données ou un fichier KML, n'importe quoi 🙂 .. je ne sais pas comment l'enregistrer? Quelqu'un pourrait-il m'aider

OriginalL'auteur mohd khanfer | 2012-06-01

  1. 10

    Ici, http://jsfiddle.net/X66L4/1/ dessinez des cercles, cliquez sur ENREGISTRER, puis sur modifier les cercles de commutation pour le curseur en forme de main et de les ENREGISTRER à nouveau pour voir les changements.

    Je montre un exemple pour enregistrer des cercles de données, l'idée principale est de garder un tableau global pour chaque type de dessin (ligne, polygone, marqueur, le cercle), et l'utilisation d'un écouteur sur le dessin manager pour détecter chaque type dessinée (complet). 

      var circles = [];

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

    La raison pour enregistrer la totalité de la référence à l'objet dessiné est de continuer le suivi des modifications. Ainsi, vous aurez besoin d'un tableau et d'écoute pour chaque type de dessin.

    Ensuite, lorsque vous souhaitez enregistrer les données (vous pouvez le faire à chaque modification), l'itération à travers les tableaux et d'en extraire le minimum d'informations pour reconstruire (centre, rayon, chemin d'accès, latLng, et ainsi de suite.)

    <!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>
    Oui, l'idée que j'ai est de créer chaque élément un par un, donc c'est à vous de savoir comment organiser le JSON/XML. J'ai juste pensé que lorsque vous chargez des données, chaque élément doit être modifiable comme avant.
    ouais, en fait j'ai déjà une classe C# générer le fichier KML en connectant ensemble de points de localisation. Je ferai une autre méthode pour créer un fichier KML à partir de ces objets. Et merci beaucoup pour votre aide
    vous avez pris un exemple simple en prenant cercle. S'il vous plaît laissez-nous savoir en prendre bonne POLYGONE

    OriginalL'auteur Tina CG Hoehr

  2. 2

    Dans mon expérience, il est plus facile d'utiliser la carte de dataLayer puis le dessin manager.
    Essayez ce violon.

    FiddleLink

    Des commandes:

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

    dans cette fonction, vous pouvez voir le Créer, Lire (localStorage) et Supprimer (pas dans l'ordre):

    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)
}
    Vous êtes génial! C'est waaay de plus simple!
    L'inconvénient de cette approche est que vous êtes limité à dessin à l'aide de 'Polygone','Point', 'LineString", et non des cercles et des rectangles à partir du Dessin gestionnaire de bibliothèque. La carte.la couche de données de Google maps ne prend pas en charge le dessin le cercle et le rectangle
    Vous êtes complètement à droite. Mais je pense que la question n'est pas de se référer à des cercles.C'est juste un moyen simple de l'approche la plus simple solution de mon point de vue.

    OriginalL'auteur Rui Silva