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

　[戻る]
Yahoo! map JS版V1 で地図を描く-3

◆アイコンや図形を表示する

　　先に述べたように、1.地図の表示方法と、2.表示の制御を踏まえて、色々な地図を作成出来ます。　参考

　　ここでは、アイコンや図形の表示の仕方を述べます

　　　　具体的には、以下のようになります。

種　類	説　　明
Y.Label	ラベルを表示 (1)
Y.Marker	アイコン画像を表示 (2)
Y.Polyline	地図上に線を表示 (3)
Y.Polygon	ポリゴンを表示 (4)
Y.Circle	円、楕円を表示 (5)
Y.Map.removeFeature()	アイコンや図形を削除する

ラベルを表示する
　Y.Labelでラベルを生成します。第一引数に位置を示す Y.LatLngオブジェクトを、第二引数に表示文字列を渡します。
　Y.Map.addFeature()メソッドを追加すればラベルが表示されます。
　 var label = new Y.Label(new Y.LatLng(35.696178,139.700008), "西武新宿駅"); ymap.addFeature(label);
アイコン画像を表示する
　Y.Markerで、マーカーアイコン画像を表示できます。第一引数に位置を示す Y.LatLngオブジェクトを、オブジェクトとして渡し、オブジェクトを Y.Map.addFeature() メソッドで追加すれば標準アイコンでマーカーが表示されます。
　また、第二引数で任意の画像を Y.Iconのオブジェクトを生成し、それをobj.iconとして渡して表示することも出来ます。
　 var icon = new Y.Icon('../img/a_btn062.gif'); var marker = new Y.Marker(new Y.LatLng(35.689504,139.691704),{icon:icon}); ymap.addFeature(marker);
線を表示する
　Y.Polyline を使い線を表示できます。第一引数に線の構成点を Y.LatLng オブジェクトの配列として渡し、Y.Polylineオブジェクトを生成し、Y.Map.addFeature()メソッドで追加すれば線が表示されます。
　線の描画スタイルは Y.Style で設定します。その第一引数に色（RRGGBB形式）、第二引数に線の太さ(ピクセル)、第三引数に透過率 (0～1.0) を指定し、Y.Polylineの第二引数をobjとしたとき、obj.strokeStyle として Y.Styleオブジェクトに渡します。
　 var style = new Y.Style("0000ff",3,0.7); var latlngs = [ new Y.LatLng(35.690088,139.698978), new Y.LatLng(35.690035,139.698098), new Y.LatLng(35.689399,139.698141), new Y.LatLng(35.689330,139.695169), new Y.LatLng(35.688885,139.692379), new Y.LatLng(35.689582,139.692186) ]; var polyline = new Y.Polyline(latlngs, {strokeStyle: style}); ymap.addFeature(polyline);
多角形 (ポリゴン) を表示する
　Y.Polygon を使って多角形を表示できます。第一引数に線を構成する点を Y.LatLng オブジェクトの配列として渡し、Y.Polygon オブジェクトを生成し、それを Y.Map.addFeature() メソッドで追加すれば外郭線が表示されます。
　Y.Polygon は境界線のスタイルとして strokeStyle、塗りのスタイルとして fillStyle の２つを指定できます。
　 var latlngs = [ new Y.LatLng(35.688467,139.707121), new Y.LatLng(35.688049,139.705404), new Y.LatLng(35.686376,139.704203), new Y.LatLng(35.684772,139.704460), new Y.LatLng(35.681112,139.712056), new Y.LatLng(35.681914,139.713172), new Y.LatLng(35.681600,139.714245), new Y.LatLng(35.682855,139.715575), new Y.LatLng(35.684249,139.714588), new Y.LatLng(35.687282,139.714717), new Y.LatLng(35.687282,139.712957) ]; var polygon = new Y.Polygon(latlngs,{ strokeStyle: new Y.Style("ff0000",4,0.7), fillStyle: new Y.Style("ff0000",null,0.2) }); ymap.addFeature( polygon ); var strokeStyle = new Y.Style("00ff00",4,0.7); var fillStyle = new Y.Style("00ff00",null,0.2);
円を表示する
　Y.Circle を使い、円あるいは楕円を表示します。第一引数には円の中心の緯度経度を指定します。第二引数に円の半径を Y.Size オブジェクトで指定します。Y.Size のコンストラクタは東西方向の半径、南北方向の半径の順にピクセル値で指定します。第三引数は Y.Polygon と同様 strokeStyle および fillStyle で指定します。
　なお半径はデフォルトのピクセル「"pixel"」だけでなく、キロメートル「"km"」で指定することもできます。
　 var circle = new Y.Circle(new Y.LatLng(35.690519,139.705820), new Y.Size(0.5,0.3), { unit:"km", strokeStyle: strokeStyle, fillStyle:fillStyle }); ymap.addFeature(circle);
アイコンや図形を削除する
　追加したアイコンや図形を削除するには、Y.Map.removeFeature() メソッドを使用します。
removeFeature()メソッドには Y.Marker や Y.Polyline といったオブジェクトそのものを引数として渡します。
　 ymap.removeFeature(marker);

　　　●以上の具体的なページ例は以下のようになります。　　　拡大例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【APPID】"></script>
  <script type="text/javascript">
    window.onload = function(){
      var ymap = new Y.Map("map");
      ymap.drawMap(new Y.LatLng(35.69015,139.69977),15, Y.LayerSetId.NORMAL);
      var layer = new Y.LayerSetControl ;
      ymap.addControl(layer);
      var zoom = new Y.ZoomControl ;
      ymap.addControl(zoom);
      var scale = new Y.ScaleControl;
      ymap.addControl(scale);
      var label = new Y.Label(new Y.LatLng(35.696178,139.700008), "西武新宿駅");
      ymap.addFeature(label);
      var icon = new Y.Icon('../img/a_btn062.gif');
      var marker = new Y.Marker(new Y.LatLng(35.689504,139.691704), {icon: icon});
      ymap.addFeature(marker);
      var style = new Y.Style("0000ff",3,0.7);
      var latlngs = [
        new Y.LatLng(35.690088,139.698978),
        new Y.LatLng(35.690035,139.698098),
        new Y.LatLng(35.689399,139.698141),
        new Y.LatLng(35.689330,139.695169),
        new Y.LatLng(35.688885,139.692379),
        new Y.LatLng(35.689582,139.692186)
      ];
      var polyline = new Y.Polyline(latlngs, {strokeStyle: style});
      ymap.addFeature(polyline);
      var latlngs = [
        new Y.LatLng(35.688467,139.707121),
        new Y.LatLng(35.688049,139.705404),
        new Y.LatLng(35.686376,139.704203),
        new Y.LatLng(35.684772,139.704460),
        new Y.LatLng(35.681112,139.712056),
        new Y.LatLng(35.681914,139.713172),
        new Y.LatLng(35.681600,139.714245),
        new Y.LatLng(35.682855,139.715575),
        new Y.LatLng(35.684249,139.714588),
        new Y.LatLng(35.687282,139.714717),
        new Y.LatLng(35.687282,139.712957)
      ];
      var polygon = new Y.Polygon(latlngs,{
        strokeStyle: new Y.Style("ff0000", 4, 0.7),
        fillStyle: new Y.Style("ff0000", null, 0.2)
      });
      ymap.addFeature( polygon );var strokeStyle = new Y.Style("00ff00", 4, 0.7);
      var fillStyle   = new Y.Style("00ff00", null, 0.2);
      var circle = new Y.Circle(new Y.LatLng(35.690519,139.705820), new Y.Size(0.5,0.3), {
        unit:"km",
        strokeStyle: strokeStyle, 
        fillStyle:fillStyle
      });
      ymap.addFeature(circle);
    }
  </script>
</head>
<body>
  <div id="map" style="width:300px; height:300px"></div>
  <a href="http://developer.yahoo.co.jp/about">
    <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" border="0" style="margin:4px 25px 15px 0px;float:left;"></a>
</body>
</html>

　Y-map top/ 作る-1/ 作る-2/ 作る-3/ 作る-4/ 作る-5/ 作る-6/