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

[戻る] Yahoo!地図 JS版V1 で地図を描く-6
先に述べたように、1.地図の表示方法と、2.表示の制御を踏まえて、色々な地図を作成出来ます。　参考サイト ◆プラグインを利用する　　ここでは、Yahoo!地図 JavaScript で利用できるプラグインについて述べます。　Yahoo!地図のプラグイン
１．経路探索プラグイン（Y.RouteSearchPlugin）　　　右クリックでメニューを表示し、地図上で地点を指定して経路探索を行ったり、経路を編集したりできます　詳細はこちら
２．独自プラグインの作成　　　APIに対する処理をJavaScriptで記述し、プラグインとして公開することが可能です　参考サイト　　　独自のプラグインを作成するには、Y.extendメソッドを使って Y.Pluginオブジェクトを継承し、次のメソッドを実装します。　　　　・Y.Plugin.load(Y.Map ymap) 　　　　　　Y.Map.addPlugin の実行時に呼び出します。引数として、プラグインと関連付けた Y.Mapオブジェクトが渡されます。　　　　・Y.Plugin.unload() 　　　　　　Map.removePlugin の実行時に呼び出されます。　　　//地図上にアイコンを表示する独自プラグイン(HelloPlugin)を作成します。 var HelloPlugin = Y.extend(Y.Plugin, function() { }); //loadメソッドを実装。呼び出し時に地図にマーカー追加し情報ウィンドウを表示します。 HelloPlugin.prototype.load = function(ymap) { this.ymap = ymap; this.marker = new Y.Marker(this.ymap.getCenter()); this.ymap.addFeature(this.marker); this.marker.openInfoWindow("ここにHTMLタグなどを記述"); }; //unloadメソッドを実装。地図に追加していたマーカーを削除します。 HelloPlugin.prototype.unload = function() { this.ymap.removeFeature(this.marker); if (this.ymap.isInfoWindowOpen()) { this.ymap.closeInfoWindow(); } }; 　　　　次に、作成したプラグインを Y.Map.addPluginの引数に渡すことで有効化します。　　　このとき、実装したloadメソッドに引数としてY.Mapオブジェクトが渡されます。　　　var plugin = new HelloPlugin(); ymap.addPlugin(plugin); 　　　　有効プラグインを無効にするにはY.Map.removePluginを実行します。　　　このとき、実装したunloadメソッドが呼ばれます。　　　ymap.removePlugin(plugin); 　　下記サンプルでは、HTML化された情報ウインドを表示します。　拡大例
		<script> var map6; //地図上にアイコンを表示する独自プラグイン(HelloPlugin)を作成します。 var HelloPlugin = Y.extend(Y.Plugin, function() { }); HelloPlugin.prototype.load = function(map6) { this.map6 = map6; this.marker = new Y.Marker(this.map6.getCenter()); this.map6.addFeature(this.marker); this.marker.openInfoWindow("<a href='http://kurage.ready.jp/jtanzawa/t-fuji/t-fuji.html'><img src='../img/16a0164ss.jpg' align=left></a>　<a href='http://kurage.ready.jp/jtanzawa/tanzu.html'>丹沢の風景</a> 等"); }; HelloPlugin.prototype.unload = function() { this.map6.removeFeature(this.marker); if (this.map6.isInfoWindowOpen()) { this.map6.closeInfoWindow(); } }; //地図を初期化 map6 = new Y.Map("map6"); map6.addControl(new Y.LayerSetControl()); map6.addControl(new Y.ZoomControl()); map6.drawMap(new Y.LatLng(35.410348,139.212071),13, Y.LayerSetId.NORMAL); //プラグインを追加 var plugin = new HelloPlugin(); map6.addPlugin(plugin); </script>
３．注記クリックプラグイン（Y.MapAnnotationPlugin）　　　注記クリックプラグインは、地図上の交差点や店舗アイコンといった、注記情報を取得する機能を提供します　　参考　　注記クリックプラグイン（Y.MapAnnotationPlugin）をY.Mapオブジェクトに追加して利用します。　　地図上の注記がクリックされた際に、クリック対象の注記情報を受け取ります　　　//Mapオブジェクト(変数名map)に、注記をクリックした際に呼び出される関数を定義します。 var showAnnotation = function(annotation) { //注記の位置にマーカーを設定します。 var nameMarker = new Y.Marker( annotation.centerLatLng,{ "title": annotation.name } ); map.addFeature(nameMarker); //注記の矩形を透過ポリゴンで描画します。 var ne = annotation.latLngBounds.getNorthEast(); var sw = annotation.latLngBounds.getSouthWest(); var boundary = [ new Y.LatLng(sw.lat(), ne.lng()), new Y.LatLng(ne.lat(), ne.lng()), new Y.LatLng(ne.lat(), sw.lng()), new Y.LatLng(sw.lat(), sw.lng()) ]; var boundPolygon = new Y.Polygon( boundary, { "strokeStyle": new Y.Style("3300ff", 1, "1.0"), "fillStyle": new Y.Style("3300ff", 5, "0.2") }); map.addFeature(boundPolygon); }; //地図の縮尺を変更した際に呼び出される関数を定義します。 var clearAnnotation = function() { map.clearFeatures(); }; //注記クリックプラグインの設定を記述します。 var configs = { "match": showAnnotation, //注記にマッチした際にshowAnnotation関数をコール "threshold": 2 //注記情報とクリック位置が2ピクセルずれていてもマッチと扱う }; var annotationPlugin = new Y.MapAnnotationPlugin(configs); //プラグインをMapオブジェクトに追加します。 map.addPlugin(annotationPlugin); //地図の縮尺が変更されたら、現在地図上に表示している注記情報を削除します。 map.bind("zoomend", clearAnnotation); 　　クリックされた位置に注記情報があると、annotationオブジェクトとして次のようにJSON形式で受け取ります。　　　{ "type" : 注記種別(String) 'icon': アイコン注記、'text': 文字列注記 "label" : 文字列注記だったときの文字列(String) "name" : 注記の名称(String) "angle" : 注記の回転角(Number) "vertical" : 文字列注記の縦書きフラグ(Boolean) "clickLatLng" : クリックされた地理座標(Y.LatLng) "centerLatLng": 注記の中心地理座標(Y.LatLng) "latLngBounds": 注記を含める範囲の地理座標矩形(Y.LatLngBounds) 傾きがある(angleが0でない)場合、注記全体を覆う矩形を示す "size" : コールバック時の縮尺における注記のスクリーン上のサイズ(Y.Size) キー"latLngBounds"で表現される矩形と一致する } 　　下記サンプルでは、地図上の地名、駅名、コンビニのアイコン等をクリックすると、注記情報を取得、表示します。　拡大例
		<script> var map7 = new Y.Map("map7"); map7.addControl(new Y.ZoomControl()); map7.drawMap(new Y.LatLng(35.66563,139.73074),17,Y.LayerSetId.NORMAL); //注記をクリックした際に呼び出される関数を定義します。 var showAnnotation = function(annotation) { //注記の位置にマーカーを設定します。 var nameMarker = new Y.Marker( annotation.centerLatLng, { "title": annotation.name }); map7.addFeature(nameMarker); //注記の矩形を透過ポリゴンで描画します。 var ne = annotation.latLngBounds.getNorthEast(); var sw = annotation.latLngBounds.getSouthWest(); var boundary = [ new Y.LatLng(sw.lat(), ne.lng()), new Y.LatLng(ne.lat(), ne.lng()), new Y.LatLng(ne.lat(), sw.lng()), new Y.LatLng(sw.lat(), sw.lng()) ]; var boundPolygon = new Y.Polygon( boundary, { "strokeStyle": new Y.Style("3300ff", 1, "1.0"), "fillStyle": new Y.Style("3300ff", 5, "0.2") }); map7.addFeature(boundPolygon); }; //地図の縮尺を変更した際に呼び出される関数を定義します。 var clearAnnotation = function() { map7.clearFeatures(); }; //注記クリックプラグインの設定を記述します。 var configs = { "match": showAnnotation, //注記にマッチした際にshowAnnotation関数をコール "threshold": 2 //注記情報とクリック位置が2ピクセルずれていてもマッチと扱う }; var annotationPlugin = new Y.MapAnnotationPlugin(configs); //プラグインをMapオブジェクトに追加します。 map7.addPlugin(annotationPlugin); //地図の縮尺が変更されたら、現在地図上に表示している注記情報を削除します。 map7.bind("zoomend", clearAnnotation);
Y-map top/ 作る-1/ 作る-2/ 作る-3/ 作る-4/ 作る-5/ 作る-6/

◆プラグインを利用する