*API4(マーカアイコンの設定) [#n3d284c0]

RIGHT:更新日&lastmod();

**マーカアイコンを設定する [#o7ce0324]

          //新しいアイコンを作成
          var icon = new GIcon();
          //アイコンの画像を指定
          icon.image = "images/icon21.png";
          //アイコンの大きさをピクセルで指定
          icon.iconSize = new GSize(32, 32);
          icon.iconAnchor = new GPoint(16,32); <===(1)
 
          icon.infoWindowAnchor = new GPoint(16, 0); <==(2)
          //マーカにアイコンを指定
          var marker = new GMarker(point,icon);
 
 (略)
          var marker = show_marker(point,infoTabs,icon);
          map.addOverlay(marker);
          marker.openInfoWindowTabsHtml(infoTabs,{selectedTab:0});

 
 (略)

 
       //マーカにマウスが来たら吹き出し表示(この部分はこのように関数する必要がある)
       function show_marker(point,infoTabs,icon){
           var marker = new GMarker(point,icon);
 
           GEvent.addListener(marker, 'click', function() {
              marker.openInfoWindowTabsHtml(infoTabs,{selectedTab:0});
           });
 
           return marker;
       }

（１）のiconAnchor
''（１）のiconAnchor''~
マーカ指定座標との位置関係を指定する。基点は画像の左上が(0,0)になる。この値がnew GPoint(0,0)のときはマーカポイントの位置が画像左上にくる。~
画像の大きさが32X32ピクセルの場合底辺の真ん中にマーカポイントを持ってくるにはnew GPoint(16,32)にする。

''（２）のinfoWindowAnchor''~
吹き出しの吹き出し元とマーカの位置関係を設定する。これが定義されていないと吹き出し表示(openInfoWindowTabsHtml)がエラーする。~
基点は画像の左上が(0,0)になる。この値がnew GPoint(0,0)のときは吹き出し元がマーカアイコンの左上コーナーになる。~
画像の大きさが32X32ピクセルの場合吹き出し元を上辺の中心から出すにはnew GPoint(16, 0)とすればよい。また座標指定の位置から吹き出しを表示するにはGPoint(16, 32)とする。

**異なるアイコンを使用する [#jf6c2452]
以下のサンプルはループでまわして複数マーカを表示する例である

          var icon = new GIcon();
          if (cid == id[i]){
                icon.image = "images/icon10.png";
          }else{
                icon.image = "images/icon21.png";
          }
          icon.iconSize = new GSize(32, 32);
          icon.iconAnchor = new GPoint(16,32);
 //以下がないと吹き出し表示でエラー
          icon.infoWindowAnchor = new GPoint(16, 0);
          var marker = new GMarker(point,icon);
 
          var marker = show_marker(point,infoTabs,icon);
          map.addOverlay(marker);
          if (cid == id[i]) marker.openInfoWindowTabsHtml(infoTabs,{selectedTab:0});
トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS