Yahoo! map JS版 Ver.1 で描く-5

[戻る] Yahoo! map JS版V1 で地図を描く-5
先に述べたように、1.地図の表示方法と、2.表示の制御を踏まえて、色々な地図を作成出来ます。　参考サイト ◆サービスを利用する　　ここでは、Yahoo! JavaScriptマップで利用できるサービスについて述べます。　　Yahoo!地図のサービス
１．ジオコーダー（Y.GeoCoder）　　参考サイト　　　ジオコーダーでは、住所文字列から経緯度へ変換でき、その結果で指定位置の地図を表示したり出来ます。　　Y.GeoCoderオブジェクトのexecuteメソッドにリクエストパラメータqueryとして文字列を渡して呼び出します。　　結果は、Y.YDFオブジェクトとして次のようにJSON形式で受け取ります。　　　{ "result": { "count": データ件数, "total": 総データ件数, "start": 取得開始件数, "latency": 処理時間, "status": 終了ステータスコード, "description": データの説明, "copyright": コピーライト }, "features": [ { "name": 拠点名称, "latlng": 拠点位置を表すY.LatLngオブジェクト, "property": { "Address": 拠点住所文字列, "GovernmentCode": 住所コード, "MapsUrl": 地図URL } }, { "name": 拠点名称, "latlng": 拠点位置を表すY.LatLngオブジェクト, "property": { "Address": 拠点住所文字列, "GovernmentCode": 住所コード, "MapsUrl": 地図URL } }, ...result.countのデータ件数分だけ繰り返し ] } 　　下記では、拠点情報の先頭のものを取得し、対応する拠点が中心の地図を表示します。　拡大例
		<script> var map1 = new Y.Map("map1"); map1.addControl(new Y.ZoomControl()); map1.addControl(new Y.CenterMarkControl); map1.drawMap(new Y.LatLng(35.69015,139.69977),14); function search() { var query = document.getElementById('input').value; var geocoder = new Y.GeoCoder(); // ジオコーディング機能を指定 geocoder.execute({query:query},function(result){ // ジオコーディングを実行 if ( result.features.length > 0 ) { map1.drawMap( result.features[0].latlng ); // callbackの経緯度を選択し表示 } } ); } </script>
２．リバースジオコーダー（Y.GeoCoder）　　　リバースジオコーダーでは、緯度経度から、その地点の住所文字列を求められます　　参考サイト　　Y.GeoCoderオブジェクトのexecuteメソッドにリクエストパラメータlatlngとして Y.LatLngオブジェクトを引数で渡して呼び出します。　　結果は、Y.YDFオブジェクトとして次のようにJSON形式で受け取ります。　　　{ "result": { "count": データ件数, "total": 総データ件数, "start": 取得開始件数, "latency": 処理時間, "status": 終了ステータスコード, "description": データの説明, "copyright": コピーライト }, "features": [ { "name": 拠点名称, "latlng": 拠点位置を表すY.LatLngオブジェクト, "property": { "Address": 拠点住所文字列, "GovernmentCode": 住所コード, "MapsUrl": 地図URL } }, { "name": 拠点名称, "latlng": 拠点位置を表すY.LatLngオブジェクト, "property": { "Address": 拠点住所文字列, "GovernmentCode": 住所コード, "MapsUrl": 地図URL } }, ...result.countのデータ件数分だけ繰り返し ] } 　　下記サンプルでは、ドラッグした地図の中心の住所を表示します。　　拡大例
	移動先は、	<script> var map2 = new Y.Map("map2"); map2.addControl(new Y.ZoomControl()); map2.addControl(new Y.CenterMarkControl); map2.drawMap(new Y.LatLng(35.665627,139.730738), 15); map2.bind( 'moveend' , function() { // 地図が止った時、中心の緯度経度をリバースジオコーディング var geocoder = new Y.GeoCoder(); geocoder.execute({latlng:map2.getCenter()},function(result){ if ( result.features.length > 0 ) { // リバースジオコーディング結果を表示 document.getElementById('address').innerHTML = result.features[0].property.Address; } } ); } ); </script>
３．経路探索レイヤー（Y.RouteSearchLayer）　　　経路探索レイヤーでは、指定した地点間の経路を探索して地図上に表示します　　参考サイト　　Y.RouteSearchLayerオブジェクトのexecuteメソッドに経路の地点を持つY.LatLngオブジェクトの配列を引数として渡して呼び出し、Y.MapオブジェクトのaddLayerメソッドに引数として渡して追加することで、経路が描画されます。　　経路探索レイヤーを生成する際に、緯度経度の配列を指定すると、レイヤーが読み込まれたときにその経路が表示されます。　　　// 宣言済みのMapオブジェクト（変数名map）に経路探索レイヤーを追加するサンプルです。 // 四ツ谷～神宮球場～渋谷駅への経路を探索します。 var latlngs = [ new Y.LatLng(35.6858,139.7308),//四ツ谷駅 new Y.LatLng(35.6736,139.7164),//神宮球場 new Y.LatLng(35.6591,139.7008) // 渋谷駅 ]; var config = { "traffic":"car" }; var layer = new Y.RouteSearchLayer(); layer.execute(latlngs,config); //経路地点データをexecuteの引数として渡す map3.addLayer(layer); //RouteSearchLayerをMapオブジェクトに追加　下記サンプルは、渋谷駅から神宮球場を経由して四ツ谷駅までの車でのルートを表示します。　拡大例
		<script> var map3 = new Y.Map("map3"); map3.addControl(new Y.ZoomControl()); map3.drawMap(new Y.LatLng(35.673608,139.716369), 14); // 宣言済みのMapオブジェクト（変数名map）に経路探索レイヤーを追加するサンプルです // 四ツ谷～神宮球場～渋谷駅への経路を探索します var latlngs = [ new Y.LatLng(35.6858,139.7308),//四ツ谷駅 new Y.LatLng(35.6736,139.7164),//神宮球場 new Y.LatLng(35.6591,139.7008) // 渋谷駅 ]; var config = { "traffic":"car" }; var layer = new Y.RouteSearchLayer(); layer.execute(latlngs,config); //経路地点をexecuteの引数として渡す map3.addLayer(layer); //RouteSearchLayerをMapオブジェクトに追加 </script>
４．経路探索プラグイン（Y.RouteSearchPlugin）を使う　　参考サイト　　　経路探索プラグインを使うと、指定した地点間の経路を、インタラクティブUIを使って操作できます　　経路探索プラグイン（Y.RouteSearchPlugin）をY.Mapオブジェクトに追加することで利用できます　　右クリックでメニューを表示し、地図上で地点を指定して経路探索を行ったり、経路を編集したりできます　　　//宣言済みのMapオブジェクト（map）に経路探索プラグインをMapオブジェクトに追加します var plugin = new Y.RouteSearchPlugin(); map.addPlugin(plugin); 　下記サンプルは、地図上で右クリックするとメニューが開き、ルート検索が出来ます。　拡大例
		<script> var map4 = new Y.Map("map4",{"configure":{"scrollWheelZoom":true}}); map4.addControl(new Y.ZoomControl()); //経路探索プラグインを生成します。 var plugin = new Y.RouteSearchPlugin(); // Mapオブジェクトにプラグインを追加します。 map4.addPlugin(plugin); // 地図を描画します。 map4.drawMap(new Y.LatLng(35.6736,139.7164),14,Y.LayerSetId.NORMAL); </script>
Y-map top/ 作る-1/ 作る-2/ 作る-3/ 作る-4/ 作る-5/ 作る-6/

◆サービスを利用する