diviconでleafletのマーカーにhtmlタグを使用する

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
diviconでleafletのマーカーにhtmlタグを使用する [2021/11/19 02:49] – 133.11.144.12diviconでleafletのマーカーにhtmlタグを使用する [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-====== diviconでleafletのマーカーにhtmlタグを使用する ====== 
- 
-Leafletで地図上にマーカーをプロットする際には、以下のようにマーカーを追加できる。 
- 
-    L.marker([lat,lon]).addTo(map); 
- 
-デフォルトのアイコンは、''L.Icon.Default''オブジェクトが与えられる。（青色のピン）  
- 
-ここでマーカーのアイコンを画像などに置き換えたいときは、''icon''オプションで指定してあげればよい。 
- 
-    L.marker([lat,lon], { icon: myIcon }).addTo(map); 
- 
-ここで''icon''オプションに与えるアイコンを''div''タグで作成したいときは、''L.divIcon''オブジェクトを作成し、''icon''オプションに与えてあげればよい。''div''タグにクラスを与えたいときはclassNameオプションで指定する。 
- 
-    var myIcon = L.divIcon({className: 'my-div-icon'}); 
-    // you can set .my-div-icon styles in CSS 
-     
-    L.marker([50.505, 30.57], {icon: myIcon}).addTo(map); 
- 
-divタグの中身にHTMLタグを入れたいときは、htmlオプションで引数にHTMLタグを文字列として渡してあげればよい。 
- 
-    var myIcon = L.divIcon({ html: HTMLタグ }); 
- 
-===== 参考にしたサイト ===== 
- 
-[[https://leafletjs.com/reference.html#icon | DivIcon Documentation]] 
  
  • diviconでleafletのマーカーにhtmlタグを使用する.1637290157.txt.gz
  • 最終更新: 2021/11/19 02:49
  • by 133.11.144.12