sql >> データベース >  >> RDS >> Mysql

Googleマップのオーバーレイシェイプをデータベースに保存するにはどうすればよいですか?

    単に何らかの形で形状を保存したい場合は、JSON文字列を使用して、たとえば次のように保存できます。 Text -column(char 詳細なポリゴン/ポリラインを格納するには小さすぎます)

    注:JSON文字列を作成するときは、プロパティを変換する必要があります(たとえば、ネイティブ配列またはオブジェクトに変換する必要があります)。たとえば、LatLngを直接保存することはできません。これは、プロトタイプを保存すると失われるためです。ポリライン/ポリゴンのパスは、エンコードされた状態で保存できます

    別のアプローチ:複数の列を使用します。

    1. 列(varchar )タイプ(LatLng、Circle、Polylineなど)を格納する場所
    2. 列(geometry )幾何学的特徴(LatLng、Polygon、Polyline)を保存する場所
    3. 列(int )半径を格納する場所(円を挿入するときに使用)
    4. オプションでcolumn(text )スタイルオプションを保存する場所(必要な場合)

    単に保存したい場合は、最初の提案で十分です。

    特定の領域など、特定の形状を選択できる必要がある場合は、2番目の提案を使用します。 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/ >



    1. ローカルホスト(xampp)でMySQLの厳密モードをオン/オフにする方法は?

    2. select * from table vs select colA、colB、etc. from table Interesting Behavior in SQL Server 2005

    3. WebアプリでReportingServices2005によって呼び出されたときに、2番目のT-SQLクエリが最初のクエリよりもはるかに高速に実行されるのはなぜですか

    4. AndroidでJTDSドライバーを使用してSQLサーバーに接続する方法