Как сохранить наложенную форму карты Google в базе данных?

Я хочу сохранить наложенную форму карт Google в базе данных. Это мой код. Он работает отлично, но мне просто нужно сохранить массив all_shapes в базе данных.Как сохранить наложенную форму карты Google в базе данных?

<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">&nbsp;</td> 
      <td bgcolor="#00FF00">&nbsp;</td> 
      <td bgcolor="#0000FF">&nbsp;</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.

источник

2013-10-27 Sponge Bob

Возможный дубликат [Как сохранить массив содержит объекты (накладки карт Google) в базе данных?] (Http://stackoverflow.com/questions/19615298/how-to-save-array-contains-objects-google-map -overlays-in-database) – AlexB

У меня была такая же проблема, как сохранить многоугольник с карт Google на postgresql, это то, что я сделал https://stackoverflow.com/a/39438476/924300 –

Когда вы просто хотите каким-то образом сохранить фигуры, вы можете использовать JSON-строку, сохранить ее, например. Text -column (char будет мал, чтобы хранить подробные многоугольники/полилинию)

Примечание: при создании JSON-строки, вы должны преобразовать свойства (например, в родные массивы или объекты), вы не можете хранить, например, LatLng напрямую, потому что прототип будет потерян при его сохранении. Могут храниться участки полилиний/многоугольников encoded

Другой подход: использовать несколько столбцов, например.

колонка (varchar), где вы храните тип (LatLng, круг, полилинии и др.)
колонка (geometry), где хранятся геометрические характеристики (LatLng, многоугольник или полилинию)
колонка (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-строку в таблицу:

<?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/

источник

2013-10-27 16:48:50

Я заинтересован в использовании метода JSON, но есть круговой рефренс. Используя JSON, нам нужна только строка с колонтитулом. Можно ли использовать JSON? –

Не могли бы вы показать мне пример использования метода JSON? –

И об использовании второго метода для использования некоторых столбцов. Чтобы сохранить все точки полигона, как его сохранить? Я имею в виду, что мне нужно использовать строковый столбец или много int columnt? –

Simple GeoJson Editor - это пример рисования, редактирования, удаления и сохранения фигур как geoJson на картах Google.Автор (стажер Google) описал проект в этом post.

Javascript и HTML не уточняются.

Еще лучше инструмент с открытым исходным кодом можно найти на Geojson.io

источник

2015-09-12 02:25:52 intotecho

Если вам нужно сохранить путь только, чтобы восстановить его позже на карте, вы можете также использовать Google Maps Encoding Utility. Это не так сильно, как ответ Dr.Molle, но может быть полезен для хранения полигонов и полилиний.

источник

2017-11-24 22:16:34 trainmaster

Как сохранить наложенную форму карты Google в базе данных?

ответ

Смежные вопросы