竹形誠司 ブログ
Java+MySQL+Tomcat    »トピック一覧
掲示板へのスパムが多いため、「ご質問」のコーナーはユーザー登録制とさせていただきました。お手数ですが、上の「新規ユーザーの登録」メニューより登録をお願いします。
帳票Web
アプリケーション

受注開発始めました
詳しくは こちら
竹形 誠司 著/ラトルズ刊
JSP帳票アプリケーション実践開発入門
JSP帳票アプリケーション
実践開発入門

JSP業務アプリケーション短期開発入門
JSP業務アプリケーション
短期開発入門

Java+MySQL+Tomcatで始めるWebアプリケーション構築入門
Java+MySQL+Tomcatで始めるWebアプリケーション構築入門

Java+MySQL+Tomcatで作る掲示板とブログ
Java+MySQL+Tomcatで作る
掲示板とブログ
携帯GPSの位置情報をGoogleMaps上に表示する
by 竹形 誠司[takegata]
携帯GPSで位置情報を記録する
(リンク→http://www.orquesta.org/takegata/Article/ArticleView.jsp?article_id=268)で記録したGPS情報をGoogleMaps APIを使って地図の上に重ねてみました。

GoogleMaps APIは、自分の作ったページにGoogleの地図を表示するためのもので、JavaScriptで書かれています。APIの呼び出しもJavaScriptで行います。このAPIを使うには、まず、http://code.google.com/apis/maps/にアクセスして、API keyを取得します。取得したAPIキーを次のようなページの★の部分に埋め込むと地図が表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=★"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(+26.23243,+127.76906), 14);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>


キーを指定してGoogleのサーバからAPIをロードすることによって、GoogleMapsに関連するさまざまなオブジェクトをJavaScript上で使えるようになります。上のコードでは、GMaps2というクラスからmapというオブジェクトを作って、setCenterメソッドで地図の中心座標と縮尺を指定しています。座標の指定にはGLatLngというクラスを使います。上のコードの+26.23243は北緯、+127.76906は東経を表しています。14は縮尺です。この値を大きくすると、より詳細な地図が表示されます。

上のコードでは、作成したmapオブジェクトをHTML上の<DIV>要素に割り当てています。ここまでは、すべてJavaScriptで動いているので、htmlファイルで構いません。

表示例→http://www.orquesta.org/takegata/test/GoogleMapsApiTest.html

GPolylineオブジェクトを使えば、地図の上に線を表示することができます。上のコードのmapオブジェクトのsetCenterメソッドの後に、次のようなコードを挿入してみます。
        var points = [];
        points[0] = new GLatLng(+26.23564,+127.76639);
        points[1] = new GLatLng(+26.24093,+127.76500);
        points[2] = new GLatLng(+26.24296,+127.76720);
        points[3] = new GLatLng(+26.24796,+127.77065);
        var polyline = new GPolyline(points, "#FF0000", 3, 1);
        map.addOverlay(polyline);
上の例では、4つのポイントを配列に入れてGPolylineのコンストラクタに渡しています。コンストラクタの2番目の引数は、線の色、3番目の引数は線の太さ、4番目の引数は透明度(0が半透明、1が不透明)です。作成したオブジェクトをaddOverlayメソッドでmapオブジェクトに追加します。

表示例→http://www.orquesta.org/takegata/test/GoogleMapsApiTest2.html

これらの方法を使えば、GPSで記録したデータをマップの上に重ねて表示することができます。こんな感じです。

<%@ page contentType="text/html; charset=Windows-31J"%>
<%@ page import="java.io.*"%>
<%@ page import="java.util.*"%>
<%
String strZoom = request.getParameter("zoom");
if(strZoom==null){
    strZoom="13";
}
String strYear = request.getParameter("year");
String strMonth = request.getParameter("month");
String strDate = request.getParameter("date");
String strPath = application.getRealPath("/WEB-INF/data");
String strFile = strPath + "/XXXXXXXX_md.ezweb.ne.jp.log";
FileInputStream fis = new FileInputStream(strFile);
InputStreamReader isr = new InputStreamReader(fis,"utf-8");
BufferedReader br = new BufferedReader(isr);
ArrayList<String> alPoints = new ArrayList<String>();
while(true){
    String strLine = br.readLine();
    if(strLine==null){
        break;
    }
    String[] aryColumns = strLine.split("\t");
    if(aryColumns.length!=4){
        continue;
    }
    String strFullDate = aryColumns[0];
    if(!strFullDate.equals(strYear + "/"+strMonth + "/" + strDate)){
        continue;
    }
    String strTime = aryColumns[1];
    String strLatitude = aryColumns[2];
    String strLongitude = aryColumns[3];
    alPoints.add(strLatitude + "," + strLongitude);
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script
      src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=★"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(<%=alPoints.get(0)%>), <%=strZoom%>);
        var points = [];
        <%for(int i=0;i<alPoints.size();i++){%>
            points[<%=i%>] = new GLatLng(<%=alPoints.get(i)%>);
        <%}%>
        var polyline = new GPolyline(points, "#F00080",3,1);
        map.addOverlay(polyline);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 800px; height: 600px"></div>
  </body>
</html>
★の所にはAPIキーを指定します。また、XXXXXXXXの所は、携帯電話の端末IDです(若干手抜き)。表示例↓
http://www.orquesta.org/takegata/test/GoogleMapsTest.jsp?year=2008&month=01&date=17

と、いうわけで、あっという間に携帯追跡システムができてしまいました。バスの運行状況などを知らせるサービスなども簡単に実現できそうですね。
投稿:竹形 誠司[takegata]/2008年 01月 17日 14時 11分 /更新:2008年 01月 17日 15時 38分