当您只想以某种方式存储形状时,可以使用JSON字符串,将其存储在例如
Text-column中(
char存储较小的多边形/折线会很小)
注意:创建JSON字符串时,必须转换属性(例如,转换为本机数组或对象),因此无法直接存储LatLng,因为保存原型时会丢失原型。折线/多边形的路径可以以编码方式存储
另一种方法:使用多个列,例如
varchar
存储类型(LatLng,Circle,Polyline等)的column()geometry
存储几何特征(LatLng,多边形或折线)的column()int
存储半径的column()(插入圆时使用)- (可选
text
)存储样式选项的column()(需要时)
当您只想存储它时,第一个建议就足够了。
当您必须能够选择特定形状时,例如对于给定区域,请使用第二个建议。有关空间扩展的详细信息,请参见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 enpred//boolean indicating if pathes should be stored enpred ){ 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(),enpred); break; case 'POLYGON': tmp.geometry=this.m_(shape.getPaths(),enpred); 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.enprePath(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.deprePath(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();$stmt = $mysqli->prepare('INSERT INTO `tableName`(`columnName`) VALUES (?)');$stmt->bind_param('s', $json);foreach($_POST['shapes'] as $value){ $json = json_enpre($value); $stmt->execute();}?>恢复形状以获取形状:
<?php$json=array();$res=$mysqli->query('SELECt `columnName` from `tableName`');while ($row = $res->fetch_assoc()) { $json[]=json_depre($row['columnName']); }$res->close();$json=json_enpre($json);?>并将结果传递给
IO.OUT():
IO.OUT(<?php echo $json;?>, someGoogleMapsInstance);
演示: http :
**//jsfiddle.net/doktormolle/EdZk4/show/**



