位置情報サービスに必要な技術まとめin work

 
date:2010.05.17   posted by:yokoyama
 

横山です。
今回「Message Bottle」というTwitter連携位置情報サービスを公開しました。これを作るにあたってPC・モバイルサイト及びiPhoneアプリに共通で必要になった技術をまとめます。ナビゲーションサービスなど精度が重要になるものは国土地理院にて公開されているプログラムデータが参考になるかと思います。

 

1、現在地の緯度経度をデータベースに保存する
PostgreSQLを利用する場合PostGISがありますが、今回はMySQL(MyISAM拡張)で空間情報を保持できる「geometry」型を使いました。
参考:Asial blog

 

2、現在地からの半径内にあるデータをMySQLから検索する
モバイルやiPhoneアプリではGPSデータにより頻繁に現在地が変わるため、DBからは必要なデータより広い範囲を抽出しています。
参考:243 inari

 

3、GPSの変化により距離計算を行う
狭い範囲を頻繁に計算する場合、より簡単な計算が必要になります。
参考:LAMP

 

4、二点の緯度経度から方角を求める
Googleマップにマーカーがすべて表示されている場合は必要ありませんが、モバイル等で表示できないものはこれを利用することで、どの方角に検索対象があるかを表示できます。また、デジタルコンパスが搭載されていない機器での進行方向を、二点のGPS情報から求める時にも利用できます。
参考:中年プログラマblog

 

5、住所検索によりる結果をGoogle Map (V3)に表示させる
緯度経度を扱うサービスは、GoogleMapを利用すると簡単に実現できます。住所検索の結果だけではなく、GPSの値や上記にあるDBの値を利用できます。
参考:hampom TODAY

 

6、Google Map (V3)でマーカーからの半径に色をつける
上記の技術と組み合わせることで、マーカーをドラッグし、半径を選択することで検索するシステムを作成できます。
setRadiusによりメートル単位で半径を指定し、bindToで描画するだけです。値はjQueryによりid=’r'からとってきていますので、値が変わったらsetcircleを動かして利用します。
//==============
var centerPos = new google.maps.LatLng( 37.521108333 , 139.938030556 );
var mapOptions = {zoom : 15,center : centerPos,mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions);
var marker = new google.maps.Marker({position: centerPos,map: map, title: ”,draggable: true});
var circle = new google.maps.Circle({map: map});

function setcircle(){
   var r=$(‘#r’).val();
   circle.setRadius(r);
   circle.bindTo(‘center’, marker, ‘position’);
}
//==============

 

7、Google Map (V3)上に四角で枠線を引き、マーカーの移動範囲を限定する
緯度経度からマップに線を引くことが可能です。その範囲を超えてドラッグした場合、「マーカーの位置が元の位置に戻る」という方法で移動範囲制限を実装しました。マップの配置などは上記と同様なので省略します。
//==============
//線を引く
var ne = new google.maps.LatLng(46.00, 146.00);
var sw = new google.maps.LatLng(26.00, 127.00);
var boundingBoxPoints = [ne, new google.maps.LatLng(ne.lat(), sw.lng()),sw, new google.maps.LatLng(sw.lat(), ne.lng()), ne];
new google.maps.Polyline({path: boundingBoxPoints,strokeColor: ‘#f2cd93′,strokeOpacity: 1.0,strokeWeight: 1,map: map});
//ドラッグ前の位置を保存する変数
var tmpPosition;
var area = new google.maps.LatLngBounds(sw,ne);
//check
function areacheck(p){
   if(area.contains(p)){tmpPosition=p;map.setCenter(p);
   }else{marker.setPosition(tmpPosition);}
}
//マーカーのドラッグの開始位置を保存
google.maps.event.addListener(marker, ‘dragstart’, function() {tmpPosition = marker.position;});
//マーカーのドラッグ終了時に範囲をチェックする
google.maps.event.addListener(marker, ‘dragend’, function() {var p = marker.position;areacheck(p);});
//==============

 
"social-app"で関連する記事一覧 (シーケンスで表示する)
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.05-勇者マイミク in services
•2010.05.05-くままり。 in services
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.21-mixiアプリの登録手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
 
 
"socolab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.17-Message Bottleをリリースしました in news
•2010.05.13-おっぱいW-cupをリリースしました in news
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.05.05-メッセージボトル in services
•2010.05.05-おっぱいワールドカップ in services
•2010.05.05-DJ Turndroid in services
•2010.05.05-勇者マイミク in services
•2010.05.05-くままり。 in services
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.04.01-Androidアプリ「DJ Turndroid」をリリース! in news
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.21-mixiアプリの登録手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.14-Googleサーバー活用法[ファイル置き場] in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-ブログ向け音楽プレイヤー「DSN Player」 in news
•2009.05.27-もっとがほしいDSN in work
•2009.03.20-会津しこんがasahi.comの動画に in news
•2009.03.02-みんなが大好きjQuery in work
•2009.02.28-居酒屋“会津しこん”がasahi.comで紹介されました in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
•2009.01.17-会津しこんで取材 in work
•2008.12.22-地域SNSから生まれた居酒屋「会津しこん」 in news
 
 
"twitter"で関連する記事一覧 (シーケンスで表示する)
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.17-Message Bottleをリリースしました in news
•2010.05.13-おっぱいW-cupをリリースしました in news
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|social-app socolab twitter