LeafletのMarkerの使い方についてまとめました。
Markerの作成
L.marker(<LatLng> latlng, <Marker options> options?)
Markerを配置する地点の座標（緯度経度）と、オプションを指定します。オプションは省略可能です。
sample code
|
1 |
L.marker([35.7, 139.8]).addTo(map); |
Options
Marker作成時に指定できるオプションです。
| option | default value | 説明 |
|---|---|---|
| icon | * | Markerのアイコンを指定します。 未指定の場合は、デフォルトでL.Icon.Defaultの共通インスタンスが使用されます。 |
| keyboard | true | キーボードのEnterキーで、Markerがクリック可能か指定します。 |
| title | ” | Markerにツールチップを表示できます。 |
| alt | ” | アイコン画像のalt属性のテキストです。 |
| zIndexOffset | 0 | Marker画像のzIndexは、緯度に基づいて自動的に設定されますが、このオプションを使用して独自に設定することができます。 |
| opacity | 1.0 | Markerの不透明度を指定します。 |
| riseOnHover | false | Markerにマウスカーソールを当てるとホバーするか指定できます。 |
| riseOffset | 250 | riseOnHoverで使用されるzindexのオフセットを指定します。 |
keyboard、title、opacity、riseOnHover オプションの、sample code と demoは以下になります。
keyboard
|
1 2 3 4 |
L.marker( [35.7102, 139.8132], { keyboard: false } ).addTo(map); |
title
|
1 2 3 4 |
L.marker( [35.7102, 139.8132], { title: 'オプション title でツールチップを表示できます。' } ).addTo(map); |
opacity
|
1 2 3 4 |
L.marker( [35.7102, 139.8132], { opacity: 0.5 } ).addTo(map); |
riseOnHover
|
1 2 3 4 |
L.marker( [35.71020, 139.8137], { riseOnHover: true } ).addTo(map); |