[[:programming_start]] ====== Leaflet センタークロス表示 ====== 地図の中心に十字マークを表示して中心がわかるようにします。注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 ---- ===== デモ ===== センタークロス画像{{https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif}}を画面中心に表示します。クロス画像上でのクリック操作は直下のマーカーに通過します。

---- ===== ソースコード =====

---- ===== 説明 ===== マップの基本部分については[[map]]をご覧ください。マーカー部分については[[marker]]をご覧ください。センタークロス画像をL.iconに登録します


var crossIcon = L.icon({
  iconUrl: 'https://www.achiachi.net/blog/_outside/mapicon/gmap_cross.gif',
  //↑センタークロス画像のURL
  iconSize: [32, 32],  //アイコン表示サイズ(画像サイズと違えば拡大縮小されます)
  iconAnchor: [16, 16] //十字の中心位置を指定、0,0にするとアイコンの左上がセンターに表示されます
});

センタークロス画像を登録と表示、''getCenter()'' で中心座標を取得するので必ず ''setView()''より後に記述して下さい。


var crossMarker = L.marker( mymap.getCenter(),{
  icon:crossIcon,    //アイコン画像を指定
  zIndexOffset:1000, //センタークロスを他のマーカーより上側表示します。
                     //マーカーが多数ある場合はより大きな値を指定して下さい10000など
  interactive:false  //センタークロスのクリックイベントを下側のマーカーに通過させます
}).addTo(mymap);

マップが移動した場合にイベントでセンタークロスを移動させます。


mymap.on('move', function(e) {
  crossMarker.setLatLng(mymap.getCenter());
});