PHPのファイルは、UTF-8、BOMなしで保存し、 www.cyaneum.orgのpublic_htmlに置く! テーマ研究会(05/10) Google Mapsを使う 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg11@cuc.ac.jp 資料 http://www.cuc.ac.jp/rg11/ 前回の課題(1)+α • +α – 単に$addrを変更するだけでは面白くない – 利用者がブラウザ(IEなど)から入力できるとよい – テーマ研究会1で習った内容を復習して使う • フォームで入力させ、POSTやGETを使って送信 • 実現方法 – 入力用のフォームのHTMLファイルを新規作成 – フォームから送信された住所の文字列を受信す る部分をgc2.phpに追加する→gc3.phpとする 2 入力用のフォームのHTMLファイルを 新規作成 • sendaddr.htm ※UTF-8で保存 – 入力用のフォームをHTMLで作成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>住所入力</title> </head> <body> <form method="POST" action="gc3.php"> 住所: <input type="text" name="addr" size=“30" /> <input type="submit" value="送信" /> </form> </body> </html> 3 sendaddr.htm送信された住所の文字 列を受信する部分をgc2.phpに追加 • gc2.phpを改造して、sendaddr.htmからPOSTで 送信された住所の文字列を受信し、処理する – 処理内容は変更無し • Geocodingを利用して緯度・経度を取得 • Heartrails expressを利用して、緯度・経度から最寄り駅 を検索 gc3.phpとして保存 • 結果を表示 • 変更点 – $addrのところを、POSTで受信したパラメタにする $addr = $_POST['addr']; 4 Google Maps API • Google Maps – Google社が提供するオンライン地図サービス • Google Maps API – 外部の開発者が利用できるように提供されたAPI • 使うには – 「Version 3」(以下V3と略)が2009年5月27日に公 開 – これまでは利用するために、登録とAPI keyの取 得が必須だったが不要になった 5 サンプル(前半) <html> <head> <!--iPhone用フルスクリーン表示設定--> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps API V3 サンプル</title> <!--Google Maps APIの読み込み--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function initialize() { //地図の座標位置(経度,緯度)を設定 var latlng = new google.maps.LatLng(35.741862,139.908314); //地図必須プロパティを設定 var myOptions = { //地図の初期ズーム値 zoom: 18, 6 PC用のサンプル(後半) //地図の初期中心位置(経度,緯度)を設定 center: latlng, //地図タイプを設定 mapTypeId: google.maps.MapTypeId.ROADMAP }; //地図を生成し、指定したHTMLエレメントに表示 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <!--ページ読み込み後にinitialize()関数を実行--> <body onload="initialize()"> <!--地図表示用の領域を幅・高さ100%で設定--> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> 7 PHPと組み合わせる • Google Maps APIはJavaScriptからの利用を前 提に作られており、そのままではPHPで使え ない • ライブラリ「GoogleMapsAPIクラス」を使用する – Phpinsider.comから配布されている – PHPの知識のみでGoogleMapsAPIを利用可能 – 日本対応部分は、秋元裕樹氏作成の日本向け 対応クラスを利用する 8 携帯電話の制約 • PCのように、JavaScriptがブラウザから使えず、 Ajaxにも対応していないので、Google Mapsなど の楽しいWebアプリは使えない • しかし、地図を利用したいアプリやサービスはた くさんある • 解決法 – 地図画像を静止画として利用する – Google Static Maps API(Googleマップの静的画像用 API)が公開 • https://developers.google.com/maps/documentation/static maps/?hl=ja 9 地図を静止画で出力する方法 • Google Static Maps API(Googleマップの静的 画像用API)を使う – https://developers.google.com/maps/documentat ion/staticmaps/?hl=ja • 使い方例 – 「千葉商科大学を中心に、ズームレベル14で、画 像サイズを240ドット×320ドットで表示する – http://maps.google.com/maps/api/staticmap?ce nter=35.741518,139.9077299&zoom=14&size=24 0x320 このURLをブラウザで開く か HTMLの中でIMGタグに 10 組み込む 留意点 • Static mapを使用するときは、パラメタsensor が必須となる – sensor(必須)は、静的マップをリクエストしている アプリケーションがユーザーの位置情報を取得す るのにセンサーを用いているかを指定します。 – このパラメータはすべての静的マップのリクエスト に必須です。 – 例、sensor=true または false 11 使い方例の地図画像 12 地図の種類を変える • パラメタ名: maptype – roadmap(デフォルト) • Google マップ ウェブサイトで通常表示される標準の道路地図画 像 – satellite 航空写真 – terrain 物理的な地形図画像です。地形や植生 – hybrid 航空写真と道路地図を組み合わせたもので、航 空写真の上に主要な道路や場所の名前の透過レイヤが 表示される • 例 – http://maps.google.com/maps/api/staticmap?center=35.7 41518,139.9077299&zoom=14&size=240x320&maptype= hybrid 13 画像にマーカーを追加する • URLにマーカーの座標と設定値を並べて書く – markers=markerStyles|markerLocation1| markerLocat ion2| • 設定値(オプションなくてもよい。これらを「|」でつ なげて書く。) – 大きさ: size: {tiny, mid, small} 省略すると普通のサ イズ – 色: color: {black, brown, green, purple, yellow, blue, gray, orange, red, white}. – Label: アルファベットまたは番号: alphanumericcharacter {A-Z, 0-9} 14 画像にマーカーを追加する • 例 – 千葉商科大学に青で「S」の文字のマーカーを付 ける http://maps.google.com/maps/api/staticmap?center=35.74 1862,139.908314&zoom=14&size=400x400&markers=color :blue|label:S|35.741862,139.908314&sensor=false center=35.741862,139.908314 は省略可能 自動的に適切な地図を作成する 15 さらにマーカーを追加する • マーカー毎に、&markersから設定値と位置情 報を付ける • 例、国府台駅の緑で「G」の文字のマーカーを 付ける http://maps.google.com/maps/api/staticmap?center=35.741518,139. 9077299&zoom=15&size=400x400&markers=color:blue|label:S|35.7 41862,139.908314&markers=color:green|label:G|35.736411,139.902 906&sensor=false 16 位置情報の取得 • 携帯電話やスマートフォンにはGPSが内蔵さ れていることが多く、地球上の絶対位置(緯 度・経度・(高度))を取得することができる • GPSが使えない場合 – 大まかな位置を取得することができる • 携帯電話では基地局情報 • PCやスマートフォンではネットワーク位置情報 17 携帯電話での位置情報取得 • 各携帯電話会社ごとに方法は異なるが、GETや POSTでサーバに送る仕組みがある(資料参照) • サンプルプログラムを試す • http://www.cyaneum.org/~riho-m/keitai_loc.zipをダウン ロードして展開 • 3つのファイルを、www.cyaneum.orgの自分の publuc_htmlに転送する。 • 次に、携帯電話から、http://www.cyaenum.org/~ユーザ 名/gps.phpにアクセスする 18 PCやスマートフォンで位置情報取得 • HTML5のgeolocation APIを使用する – JavaScriptから呼び出す • サンプルプログラムを試す • http://www.cyaneum.org/~riho-m/geo0.zipをダウンロード して展開 • geo0.htmlファイルを、www.cyaneum.orgの自分の publuc_htmlに転送する。 • 次に、PCまたはスマートフォンから、 http://www.cyaenum.org/~ユーザ名/gps.phpにアクセス する(※PCの場合は、FirefoxかChromeブラウザを使う) 19 課題 • 後半のGoogle Mapsを静止画で利用する部分を gc3.phpに追加して、検索された最寄り駅をGoogle Mapsで表示させなさい。入力実行したプログラムと、 その実行結果をレポートしなさい。 – レベル0: 結果ごとに地図を表示させる – レベル1: 地図にマーカーを付ける – 上級レベル: 検索結果を1つの地図に複数マーカーで表 示させる • レポート方法 – プログラムそのもの(テキスト) – 実行画面のスクリーンダンプ – 感想 20 課題(つづき) • 提出物 – プログラムファイルと実行結果をWordのファイルに貼り付 けて、メールで提出する • 実行画面は、フリーソフトのWinShotを使うか、または、Altキー+ PrintScreenキーを使う。 – ファイル名: kadai0510-学籍番号.doc • 提出方法 – メールで、riho-m-rg11@cuc.ac.jpに送る – 私個人宛のメールは受け取らないので注意 • 締切 – 5/16 18:00 21
© Copyright 2024 Paperzz