Wie Sie eine Google-maps-overlay-Form in die Datenbank?

Wenn Sie einfach nur speichern wollen, die Formen, irgendwie, Sie können einen JSON-string zu speichern, z.B. im Text-Spalte(char wäre zu klein, um Sie zu speichern detaillierte Polygonen/Polylinien )

Hinweis: beim erstellen der JSON-string, müssen Sie konvertieren Sie die Eigenschaften(z.B. zu native arrays oder Objekte), können Sie nicht speichern, zum Beispiel LatLng ' s direkt, denn der Prototyp geht verloren, wenn es zu speichern. Wege der Polylinien/Polygone gespeichert werden können codiert

Einem anderen Ansatz:
verwenden Sie mehrere Spalten, z.B.

1. eine Spalte (varchar), wo Sie speichern den Typ(LatLng, Kreis,Polylinie,etc.)
2. eine Spalte(geometry) speichern Sie die geometrischen Merkmale(LatLng,Polygon oder Polylinie)
3. eine Spalte (int), wo Sie speichern eine radius(wird verwendet, wenn Sie einfügen eines Kreis)
4. Optional Spalte(text) speichern Sie die style-Optionen(wenn benötigt)

Ist der erste Vorschlag wäre ausreichend, wenn Sie wollen einfach nur, um es zu speichern.

Wenn Sie müssen in der Lage sein, auf bestimmte Formen, e.g für einen bestimmten Bereich, der 2. Vorschlag.
Sehen http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html details zu den räumlichen Erweiterungen

2 Funktionen, entweder entfernen Sie die kreisförmige Referenzen und erstellen Sie speicherbare Objekte, oder stellen Sie die überlagerungen aus diesen gespeicherten Objekte.

var IO={
  //returns array with storable google.maps.Overlay-definitions
  IN:function(arr,//array with google.maps.Overlays
              encoded//boolean indicating if pathes should be stored encoded
              ){
      var shapes     = [],
          goo=google.maps,
          shape,tmp;

      for(var i = 0; i < arr.length; i++)
      {   
        shape=arr[i];
        tmp={type:this.t_(shape.type),id:shape.id||null};


        switch(tmp.type){
           case 'CIRCLE':
              tmp.radius=shape.getRadius();
              tmp.geometry=this.p_(shape.getCenter());
            break;
           case 'MARKER': 
              tmp.geometry=this.p_(shape.getPosition());   
            break;  
           case 'RECTANGLE': 
              tmp.geometry=this.b_(shape.getBounds()); 
             break;   
           case 'POLYLINE': 
              tmp.geometry=this.l_(shape.getPath(),encoded);
             break;   
           case 'POLYGON': 
              tmp.geometry=this.m_(shape.getPaths(),encoded);

             break;   
       }
       shapes.push(tmp);
    }

    return shapes;
  },
  //returns array with google.maps.Overlays
  OUT:function(arr,//array containg the stored shape-definitions
               map//map where to draw the shapes
               ){
      var shapes     = [],
          goo=google.maps,
          map=map||null,
          shape,tmp;

      for(var i = 0; i < arr.length; i++)
      {   
        shape=arr[i];       

        switch(shape.type){
           case 'CIRCLE':
             tmp=new goo.Circle({radius:Number(shape.radius),
                                  center:this.pp_.apply(this,shape.geometry)});
            break;
           case 'MARKER': 
             tmp=new goo.Marker({position:this.pp_.apply(this,shape.geometry)});
            break;  
           case 'RECTANGLE': 
             tmp=new goo.Rectangle({bounds:this.bb_.apply(this,shape.geometry)});
             break;   
           case 'POLYLINE': 
             tmp=new goo.Polyline({path:this.ll_(shape.geometry)});
             break;   
           case 'POLYGON': 
             tmp=new goo.Polygon({paths:this.mm_(shape.geometry)});

             break;   
       }
       tmp.setValues({map:map,id:shape.id})
       shapes.push(tmp);
    }
    return shapes;
  },
  l_:function(path,e){
    path=(path.getArray)?path.getArray():path;
    if(e){
      return google.maps.geometry.encoding.encodePath(path);
    }else{
      var r=[];
      for(var i=0;i<path.length;++i){
        r.push(this.p_(path[i]));
      }
      return r;
    }
  },
  ll_:function(path){
    if(typeof path==='string'){
      return google.maps.geometry.encoding.decodePath(path);
    }
    else{
      var r=[];
      for(var i=0;i<path.length;++i){
        r.push(this.pp_.apply(this,path[i]));
      }
      return r;
    }
  },

  m_:function(paths,e){
    var r=[];
    paths=(paths.getArray)?paths.getArray():paths;
    for(var i=0;i<paths.length;++i){
        r.push(this.l_(paths[i],e));
      }
     return r;
  },
  mm_:function(paths){
    var r=[];
    for(var i=0;i<paths.length;++i){
        r.push(this.ll_.call(this,paths[i]));

      }
     return r;
  },
  p_:function(latLng){
    return([latLng.lat(),latLng.lng()]);
  },
  pp_:function(lat,lng){
    return new google.maps.LatLng(lat,lng);
  },
  b_:function(bounds){
    return([this.p_(bounds.getSouthWest()),
            this.p_(bounds.getNorthEast())]);
  },
  bb_:function(sw,ne){
    return new google.maps.LatLngBounds(this.pp_.apply(this,sw),
                                        this.pp_.apply(this,ne));
  },
  t_:function(s){
    var t=['CIRCLE','MARKER','RECTANGLE','POLYLINE','POLYGON'];
    for(var i=0;i<t.length;++i){
       if(s===google.maps.drawing.OverlayType[t[i]]){
         return t[i];
       }
    }
  }

}

Array zurückgegeben IO.IN kann sein sended zu einem serverseitigen Skript. Der serverseitige Skript iteriert über das array und FÜGEN Sie ein JSON-string in die Tabelle ein:

<?php
$mysqli = new mysqli(/*args*/);
$stmt = $mysqli->prepare('INSERT INTO `tableName`(`columnName`) VALUES (?)');
$stmt->bind_param('s', $json);

foreach($_POST['shapes'] as $value){
  $json = json_encode($value);
  $stmt->execute();
}
?>

zur Wiederherstellung der Formen Holen Sie:

<?php
$json=array();
$res=$mysqli->query('SELECT `columnName` from `tableName`');
while ($row = $res->fetch_assoc()) {
        $json[]=json_decode($row['columnName']);
    }
$res->close();
$json=json_encode($json);
?>

und übergeben Sie das Ergebnis an IO.OUT():

IO.OUT(<?php echo $json;?>, someGoogleMapsInstance);

Demo: http://jsfiddle.net/doktormolle/EdZk4/show/

InformationsquelleAutor der Antwort Dr.Molle

Wenn Sie brauchen, um zu speichern, den Pfad, nur um Sie später wiederherstellen auf einer Karte können Sie auch verwenden,Google Maps Encoding Utility. Es ist nicht so mächtig, wie Dr. Molle Antwort, aber kann nützlich sein für die Speicherung von Polygonen und Polylinien.

InformationsquelleAutor der Antwort trainmaster