View
2.864
Download
1
Category
Preview:
DESCRIPTION
Yahoo! JAPAN のエンジニアがその場で作るスマホ地図サービス
Citation preview
Yahoo! JAPAN のエンジニアがその場で作るスマホ地図サービス
大野 道誉 / 鋤柄 ひかり
クッキング30分Y O L P
はじめまして
2
大野 道誉@elpeo
ヤフーで日々プログラミングをしています。エンジニア歴10年。主に地図や位置情報系のバックエンドを担当しています。今日は、Yahoo! Open Local Platform（YOLP）のAPIを活用し、30分でひとつの簡易サービスを完成させます。
鋤柄 ひかり@picacch
ヤフーの地図系サービスや開発者さん向けの地図、地域情報APIサービス、YOLPの企画・ディレクションをしています。今日は、アシスタントとしてライブコーディングの解説を担当します。
今日のレシピ
3
2012年05月12日（土）
旬の地図とラインで作る道案内投稿サービス地図好きにはたまらないサービスですね
開発時間 30分 難易度 ★☆☆☆☆
材料
4
Yahoo! Open Local Platform（YOLP）
Yahoo! JavaScriptマップAPI
Yahoo!ジオコーダAPI
アプリケーションID
ルートラボ （作成したルートの投稿先サービス）
ルートラボconnect （ルートラボへ投稿するためのインターフェース）
jQuery
情熱と好奇心 少々
YOLPとは？
地図・地域情報系APIサービス
ヤフー・オープン・ローカル・プラットフォーム
6
ルートラボとは？
まずは、地図を表示します。クッキング30分Y O L P
１．地図を表示する
２．地図に線を描く
３．ルートラボに投稿する
Yahoo! JavaScriptマップAPIの「一番シンプルな地図の表示」のサンプルをコピーします。
10
01
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index1-2
アプリケーションIDを取得し、書き換えます。
11
02
https://e.developer.yahoo.co.jp/webservices/register_application
****************************
***********
地図をプレビューし、サイズ、縮尺を変更してみます。
12
03
jQueryをインクルードし、 jQuery仕様に書き換えます。
13
04
http://jquery.com/
地図の場所を移動するために、住所検索ボックスを追加します。
14
05
Yahoo!ジオコーダAPIを使って、住所検索機能を組み込みます。
15
06
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html
Yahoo! JavaScriptマップAPIのpanTo()メソッドで、住所検索結果に地図が移動するようにします。
16
07
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/#index6-2
Yahoo!ジオコーダAPIは、経度、緯度の順番で返ってきます。Yahoo! JavaScriptマップAPIのpanTo()メソッドで指定する時には順番を逆にします。
},function(data){ if(data.Feature){ var lonlat = data.Feature[0].Geometry.Coordinates.split(/,/); ymap.panTo(new Y.LatLng(parseFloat(lonlat[1]),parseFloat(lonlat[0]))); } }); return false; });
ここまで、地図の表示と住所検索を実装完了。ここから、地図に線を引きます。
クッキング30分Y O L P
１．地図を表示する
２．地図に線を描く
３．ルートラボに投稿する
Yahoo! JavaScriptマップAPIのClass Polylineを指定して、地図上に線を引けるようにします。
19
08
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline
ポリラインのデータは後から地図上で指定するので、最初は空の配列を用意します。
var polyline = new Y.Polyline([]);
startDrawing()を使って、クリックで線を引けるようにします。
21
09
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline
ルートの作成を完了させるためのボタンを設置します。
22
10
finalizeDrawing()で作成中のポリラインを確定させます。
23
11
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline
setDraggableを有効にして、ポリラインをマウスドラッグにより編集可能にします。
24
12
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Polyline
これで、ルート作成まで完成！ここから、ルートラボへの投稿までの流れを作ります。
クッキング30分Y O L P
１．地図を表示する
２．地図に線を描く
３．ルートラボに投稿する
ルートの作成が完了したら、ルートラボへの投稿ボタンが表示されるように設定します。
26
13
ルートラボconnectに渡すデータ形式を確認します。
27
14
http://latlonglab.yahoo.co.jp/route/connect
getLatLngs()でルートの緯度経度を取得し、ルートラボconnectに渡します。
28
15
http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/reference/YFeature.html#Feature
完成！
今日のレシピのおさらい
31
１．地図を表示する
２．地図に線を描く
３．ルートラボに投稿する
http://developer.yahoo.co.jp/webapi/map/
地図・地域情報系APIサービス
ヤフー・オープン・ローカル・プラットフォーム
公式アカウント@yahoojpYOLP最新情報をお知らせ
YOLP 検索
ありがとうございました
- THE END -
Recommended