Jak zapisać kształt nakładki map Google w bazie danych?

Kiedy po prostu chcesz jakoś przechowywać kształty, możesz użyć ciągu JSON, przechowuj go np. Text -kolumna(char byłoby za małe, aby przechowywać szczegółowe wielokąty/polilinie )

Uwaga:kiedy tworzysz ciąg JSON, musisz przekonwertować właściwości (np. na natywne tablice lub obiekty), nie możesz bezpośrednio przechowywać np. LatLng, ponieważ prototyp zostanie utracony podczas zapisywania. Ścieżki polilinii/wielokątów mogą być przechowywane kodowane

Inne podejście:użyj wielu kolumn, np.

1. kolumna(varchar ) gdzie przechowujesz typ (LatLng, Circle, Polyline itp.)
2. kolumna(geometry ) gdzie przechowujesz elementy geometryczne (LatLng, Polygon lub Polyline)
3. kolumna(int ) gdzie przechowujesz promień (używany podczas wstawiania okręgu)
4. opcjonalnie kolumna(text ) gdzie przechowujesz opcje stylu (w razie potrzeby)

Pierwsza sugestia byłaby wystarczająca, gdy chcesz ją po prostu zapisać.

Kiedy musisz mieć możliwość wybrania określonych kształtów, np. dla danego obszaru, skorzystaj z drugiej sugestii. Zobacz https://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html szczegóły dotyczące rozszerzeń przestrzennych

2 funkcje, które albo usuwają odwołania cykliczne i tworzą obiekty, które można przechowywać, albo przywracają nakładki z tych przechowywanych obiektów.

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];
       }
    }
  }

}

Tablica zwrócona przez IO.IN mogą zostać wysłane do skryptu po stronie serwera. Skrypt po stronie serwera powinien iterować po tej tablicy i WSTAWIĆ ciąg JSON do tabeli:

<?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();
}
?>

aby przywrócić kształty, pobierz je:

<?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);
?>

i przekaż wynik do IO.OUT() :

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

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