डेटाबेस में गूगल मैप्स ओवरले शेप को कैसे सेव करें?

जब आप किसी तरह आकृतियों को स्टोर करना चाहते हैं, तो आप JSON-स्ट्रिंग का उपयोग कर सकते हैं, इसे उदा। एक Text -कॉलम (char विस्तृत पॉलीगॉन/पॉलीलाइन को स्टोर करने के लिए छोटा होगा)

नोट:जब आप JSON-स्ट्रिंग बनाते हैं, तो आपको गुणों (जैसे देशी सरणियों या वस्तुओं में) को परिवर्तित करना होगा, आप उदाहरण के लिए LatLng को सीधे स्टोर नहीं कर सकते, क्योंकि इसे सहेजते समय प्रोटोटाइप खो जाएगा। पॉलीलाइन/बहुभुज के पथ संग्रहीत किए जा सकते हैं एन्कोडेड ए>

एक अन्य दृष्टिकोण:एकाधिक कॉलम का उपयोग करें, उदा।

1. एक कॉलम(varchar ) जहां आप टाइप स्टोर करते हैं (LatLng, Circle, Polyline, etc.)
2. एक कॉलम(geometry ) जहां आप ज्यामितीय विशेषताओं (LatLng, Polygon या Polyline) को स्टोर करते हैं
3. एक कॉलम(int ) जहां आप एक दायरा स्टोर करते हैं (जब आप एक सर्कल डालते हैं तो इसका इस्तेमाल होता है)
4. वैकल्पिक रूप से कॉलम (text ) जहां आप स्टाइल-विकल्प (जब जरूरत हो) स्टोर करते हैं

पहला सुझाव पर्याप्त होगा जब आप इसे केवल स्टोर करना चाहते हैं।

जब आप किसी विशेष आकार का चयन करने में सक्षम हों, उदाहरण के लिए किसी दिए गए क्षेत्र के लिए, दूसरे सुझाव का उपयोग करें। देखें http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html स्थानिक विस्तार के विवरण के लिए

2 फ़ंक्शन जो या तो सर्कुलर संदर्भों को हटाते हैं और संग्रहणीय ऑब्जेक्ट बनाते हैं, या इन संग्रहीत ऑब्जेक्ट्स से ओवरले को पुनर्स्थापित करते हैं।

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

}

IO.IN . द्वारा लौटाया गया ऐरे सर्वरसाइड स्क्रिप्ट को भेजा जा सकता है। सर्वरसाइड स्क्रिप्ट को इस सरणी पर पुनरावृति करना चाहिए और तालिका में JSON-स्ट्रिंग सम्मिलित करना चाहिए:

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

आकृतियों को पुनर्स्थापित करने के लिए उन्हें प्राप्त करें:

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

और परिणाम को IO.OUT() . पर पास करें :

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

डेमो:http://jsfiddle.net/doktormolle/EdZk4/show/