携帯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キーを次のようなページの★の部分に埋め込むと地図が表示されます。
キーを指定して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メソッドの後に、次のようなコードを挿入してみます。
表示例→http://www.orquesta.org/takegata/test/GoogleMapsApiTest2.html
これらの方法を使えば、GPSで記録したデータをマップの上に重ねて表示することができます。こんな感じです。
http://www.orquesta.org/takegata/test/GoogleMapsTest.jsp?year=2008&month=01&date=17
と、いうわけで、あっという間に携帯追跡システムができてしまいました。バスの運行状況などを知らせるサービスなども簡単に実現できそうですね。
(リンク→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&v=2&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>
"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&v=2&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オブジェクトに追加します。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);
表示例→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&v=2&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です(若干手抜き)。表示例↓<%@ 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&v=2&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>
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分