Quando você simplesmente deseja armazenar as formas de alguma forma, você pode usar uma string JSON, armazená-la em, por exemplo, um
Text
-column(char
seria muito pequeno para armazenar polígonos/polilinhas detalhados) Nota:ao criar a string JSON, você deve converter as propriedades (por exemplo, para arrays ou objetos nativos), não pode armazenar, por exemplo, LatLng's diretamente, pois o protótipo será perdido ao salvá-lo. Os caminhos de polilinhas/polígonos podem ser armazenados codificado
Outra abordagem:use várias colunas, por exemplo
- uma coluna(
varchar
) onde você armazena o tipo (LatLng, Circle, Polyline, etc.) - uma coluna(
geometry
) onde você armazena os recursos geométricos (LatLng, Polygon ou Polyline) - uma coluna(
int
) onde você armazena um raio (usado quando você insere um círculo) - opcionalmente coluna(
text
) onde você armazena as opções de estilo (quando necessário)
A primeira sugestão seria suficiente quando você simplesmente deseja armazená-lo.
Quando você precisar selecionar formas específicas, por exemplo, para uma determinada área, use a 2ª sugestão.Consulte http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html para detalhes das extensões espaciais
2 funções que removem as referências circulares e criam objetos armazenáveis ou restauram as sobreposições desses objetos armazenados.
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];
}
}
}
}
A matriz retornada por
IO.IN
pode ser enviado para um script do lado do servidor. O script do lado do servidor deve iterar sobre essa matriz e INSERT uma string JSON na tabela:<?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();
}
?>
para restaurar as formas, busque-as:
<?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);
?>
e passe o resultado para
IO.OUT()
:IO.OUT(<?php echo $json;?>, someGoogleMapsInstance);
Demonstração:http://jsfiddle.net/doktormolle/EdZk4/show/>