我想在数据库中保存Google地图叠加层形状。这是我的代码。它运行完美,但是我只需要all_shapes在数据库中保存数组。
all_shapes
<html> <head> <style type="text/css"> #map, html, body { padding: 0; margin: 0; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=drawing,geometry"></script> <script> var coordinates = []; var all_shapes = []; var selectedShape; </script> <script> function draw_shape() { for(var i = 0; i < all_shapes.length; i++) { all_shapes[i].setMap(null); } for(var i = 0; i < all_shapes.length; i++) { all_shapes[i].setMap(map); } } </script> <script> function clearSelection() { if(selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); } function deleteSelectedShape() { if (selectedShape) { selectedShape.setMap(null); } } </script> <script> function save_coordinates_to_array(newShapeArg) { if(newShapeArg.type == google.maps.drawing.OverlayType.POLYGON) { var polygonBounds = newShapeArg.getPath(); for(var i = 0 ; i < polygonBounds.length ; i++) { coordinates.push(polygonBounds.getAt(i).lat(), polygonBounds.getAt(i).lng()); } } else { //alert("Not polygon");///////////// } } </script> <script> var map; function initialize() { map = new google.maps.Map(document.getElementById('map'), {zoom: 12, center: new google.maps.LatLng(32.344, 51.048)}); var drawingManager = new google.maps.drawing.DrawingManager(); drawingManager.setMap(map); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { var newShape = e.overlay; newShape.type = e.type; all_shapes.push(newShape); setSelection(newShape); save_coordinates_to_array(newShape); google.maps.event.addListener(newShape, 'click', function() {setSelection(newShape)}); }); google.maps.event.addListener(map, 'click', function(e) {clearSelection();}); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <table border="1"> <tr> <td>Name</td> <td><input name="name" id="name" type="text"></td> </tr> <tr> <td>Color</td> <td> <table border="1" width="100%"> <tr> <td bgcolor="#FF0000"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#0000FF"> </td> </tr> </table> </td> </tr> <tr> <td colspan="2"><input name="save" type="button" value="Save" onClick="draw_shape()"></td> </tr> <tr> <td colspan="2"><input name="delete" type="button" value="Delete" onClick="deleteSelectedShape()"></td> </tr> </table> <div id="map"></div> </body> </html>
我在哪里以及如何将创建的叠加形状保存在数据库中。所有形状都保存在var all_shapes = [];数组中。我必须为数据库中的字段选择哪种类型?我的意思是例如int,char等。我将使用MySQL和PHP。
var all_shapes = [];
当您只想以某种方式存储形状时,可以使用JSON字符串,将其存储在例如Text-column中(char存储较小的多边形/折线会很小)
Text
char
注意:创建JSON字符串时,必须转换属性(例如,转换为本机数组或对象),因此无法直接存储LatLng,因为保存原型时会丢失原型。折线/多边形的路径可以以编码方式存储
另一种方法:使用多个列,例如
varchar
geometry
int
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字符串插入表中:
IO.IN
<?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()
IO.OUT(<?php echo $json;?>, someGoogleMapsInstance);
演示: http : **//jsfiddle.net/doktormolle/EdZk4/show/**