Làm cách nào để lưu hình dạng lớp phủ bản đồ Google trong cơ sở dữ liệu?

Khi bạn chỉ muốn lưu trữ các hình dạng bằng cách nào đó, bạn có thể sử dụng chuỗi JSON, lưu trữ nó trong ví dụ:một Text -cột (char sẽ là nhỏ để lưu trữ các đa giác / đa đường chi tiết)

Lưu ý:khi bạn tạo chuỗi JSON, bạn phải chuyển đổi các thuộc tính (ví dụ:thành mảng hoặc đối tượng gốc), bạn không thể lưu trữ trực tiếp ví dụ như LatLng, vì nguyên mẫu sẽ bị mất khi lưu nó. Các nhóm đa giác / đa giác có thể được lưu trữ được mã hóa

Một cách tiếp cận khác:sử dụng nhiều cột, ví dụ:

1. một cột (varchar ) nơi bạn lưu trữ kiểu (LatLng, Circle, Polyline, v.v.)
2. một cột (geometry ) nơi bạn lưu trữ các đối tượng hình học (LatLng, Polygon hoặc Polyline)
3. một cột (int ) nơi bạn lưu trữ bán kính (được sử dụng khi bạn chèn một vòng tròn)
4. tùy chọn cột (text ) nơi bạn lưu trữ các tùy chọn kiểu (khi cần)

Gợi ý đầu tiên sẽ là đủ khi bạn chỉ muốn lưu trữ nó.

Khi bạn phải có thể chọn các hình dạng cụ thể, ví dụ:cho một khu vực nhất định, hãy sử dụng gợi ý thứ 2. Xem http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html để biết chi tiết về phần mở rộng không gian

2 chức năng xóa các tham chiếu vòng tròn và tạo các đối tượng lưu trữ hoặc khôi phục các lớp phủ từ các đối tượng được lưu trữ này.

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

}

Mảng được trả về bởi IO.IN có thể được gửi đến một tập lệnh phía máy chủ. Tập lệnh phía máy chủ phải lặp qua mảng này và CHÈN chuỗi JSON vào bảng:

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

để khôi phục các hình dạng tìm nạp chúng:

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

và chuyển kết quả vào IO.OUT() :

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

Bản trình diễn: http://jsfiddle.net/doktormolle/EdZk4/show/