iPhoneで最寄駅を検索+道案内する方法
せっかくiPhoneで緯度経度情報が簡単に取得できるようになったので、最寄駅を検索+道案内をマッシュアップをしてみました。
こんな感じ
http://moeten.info/maidcafe/?m=iphone&type=gps4
使用するAPI
こちらのAPIはそのまんまで緯度経度を渡すと最寄駅データーが緯度経度情報付きで返ってきます。
ですのでJavaScriptでxmlをパースしてアイコンを設置すればOK。
次にルート案内API
こちらのAPIを使用すると2点の場所(緯度経度もOK)を指定するだけでルートを描いてくれます。
上記2つのAPIを組み合わせれば最寄駅検索と道案内ができちゃいます。
#javascriptなので、結構細かい処理が必要ですが、なるべくライブラリを使う方向で(^−^)
ソースはこちら。GoogleMapのAPIKEYは取得してください。
<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <title>Google Maps JavaScript API Example: Simple Directions</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <script src="http://maps.google.com/maps?file=api&v=2.x&key=apikey" type="text/javascript"></script> <script type="text/javascript"> var map; var directionsPanel; var directions; var htmlList = new Array(); var markerList = new Array(); var sidebarList; var nowLat = "35.171289"; var nowLon = "136.882725"; //初期化関数 function initialize() { //簡単にマップ作成 map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng( nowLat , nowLon ), 16); //iPhoneで緯度経度取得 getGps(); } //iPhoneで緯度経度取得 function getGps(){ navigator.geolocation.getCurrentPosition( callback, handleError ); } //緯度経度取得成功関数 function callback(a){ map.setCenter( new GLatLng( a.coords.latitude, a.coords.longitude ), 16); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); //現在位置にカスタムマーカーをマップに設定する var markerIcon = new GIcon(); markerIcon.image = "http://moeten.info/flex/20090625_iphoneGpsTest4/iphone.gif"; markerIcon.iconSize = new GSize(30, 55); markerIcon.iconAnchor = new GPoint(-15, 27); nowLat = a.coords.latitude; nowLon = a.coords.longitude; var marker = new GMarker( new GLatLng( nowLat , nowLon ) , {icon:markerIcon} ); map.addOverlay(marker); //最寄駅データーの取得 downloadData(); document.getElementById("sidebar").innerHTML = "最寄駅データーをダウンロード中です・・・"; } //緯度経度取得エラー function handleError(a) { alert("fault"); } //最寄駅データーの取得 function downloadData(){ var url = "http://moeten.info/flex/20080502_twitterAir/myproxy.php?u="+encodeURIComponent("http://www.ekidata.jp/api/s.php?lon="+nowLon+"&lat="+nowLat); GDownloadUrl( url , createMap ); } //最寄駅データーの取得完了。XMLデーターからマーカーを作成していく function createMap(xmldata, statusCode){ var xmlDoc = GXml.parse(xmldata); var markers = xmlDoc.documentElement.getElementsByTagName("station"); for (var i = 0; i < markers.length; i++) { var lats = markers[i].getElementsByTagName("lat"); var lngs = markers[i].getElementsByTagName("lon"); var meters = markers[i].getElementsByTagName("meter"); var line_names = markers[i].getElementsByTagName("line_name"); var names = markers[i].getElementsByTagName("station_name"); var lat = parseFloat(GXml.value(lats[0])); var lng = parseFloat(GXml.value(lngs[0])); var meter = GXml.value(meters[0]); var line_name = GXml.value(line_names[0]); var name = GXml.value(names[0]); createMarker( lat ,lng , name , meter , line_name , i ); } document.getElementById("sidebar").innerHTML = "<select onchange=dispMarker(this.value)>" +"<option>-最寄駅を選択-</option>" +sidebarList+"</select>"; } //マーカー作成関数 function createMarker( lat , lon , name , meter , line_name , i ){ var marker = new GMarker( new GLatLng( lat, lon ) ); markerList[i] = marker; htmlList[i] = meter + 'm<br/>' + line_name + '<br/>' + name+ '<br/><a href="#" onClick="showRout('+i+')">route</a>'; sidebarList += "<option value=" + i + ">"+meter+"m"+line_name+name+"駅</option>"; map.addOverlay(marker); } //現在位置から駅までのルート検索 function showRout(i) { markerList[i].closeInfoWindow(); directions = new GDirections(map); directions.clear(); var points = new Array(); points.push(new GLatLng(nowLat,nowLon)); points.push(markerList[i].getLatLng() ); directions.loadFromWaypoints(points); } </script> <style type="text/css"> *{ padding:0px;margin:0px; } </style </head> <body onload="initialize()"> <div id="sidebar" style="padding:3px;"></div> <div id="map_canvas" style="width: 100%; height: 310px;"></div> <br/> </body> </html>
参考リンク
#あとは、終電案内とか作ってほしいもんです。