web-dev-qa-db-ja.com

リーフレット：カスタムマーカーアイコンにテキストラベルを追加する方法

カスタムアイコンマーカーにテキストを追加することはできますか？テキストを追加するためだけに、画像エディターでアイコンを編集する必要を避けたいです。

次のようにカスタムアイコンマーカーを作成しました。

var airfieldIcon = L.icon({
        iconUrl: 'images/airfield.png',
        iconSize: [48,48]
});

var airfield = L.geoJson (airfield, {
    pointToLayer: function(feature,latlng){
        return L.marker(latlng, {
            icon: airfieldIcon
        })
    }
}).addTo(map);

このアイコンのラベルとして「バンフ飛行場」というテキストを追加するにはどうすればよいですか？画像エディターを使用する最も簡単で効率的な方法はありますか？もしそうなら、私はその方法を行いますが、より良い方法があったかどうか疑問に思います。ありがとう！

leafletmapbox
23
redshift

L.DivIconを使用できます：

画像の代わりに単純なdiv要素を使用するマーカーの軽量アイコンを表します。

http://leafletjs.com/reference.html#divicon

画像とテキストをHTMLに入れて、CSSを振りかけて、思い通りに表示してください。

new L.Marker([57.666667, -2.64], {
    icon: new L.DivIcon({
        className: 'my-div-icon',
        html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
              '<span class="my-div-span">RAF Banff Airfield</span>'
    })
});

別のオプションは、Leaflet.Labelプラグインを使用することです。

Leaflet.labelは、リーフレットを使用したマップ上のマーカーと図形にラベルを追加するためのプラグインです。

36
iH8

リーフレットバージョン1.0.0では、プラグインを使用せずにラベルを追加できます（プラグインはコア機能に組み込まれています）。

例：

var marker = L.marker(latlng)
    .bindTooltip("Test Label", 
    {
        permanent: true, 
        direction: 'right'
    }
);

これにより、マーカーのアイコンの右側に常に表示される「Test Label」というラベルの付いたマップ上のマーカーが生成されます。

20
Mark