nuxt-leafletの「l-popup」「l-tooltip」について

JavaScript
この記事は約2分で読めます。

みなさんこんにちは!

イザナギです。

さて、今回も前回に引き続き「leaflet」に関する話題です。

「l-popup」「l-tooltip」について書いていきたいと思います。

nuxt-leafletまたはvue2-leafletには「l-popup」「l-tooltip」のコンポーネントが存在します。

l-popupとは

名前からも想像できると思いますが、ポップアップを表示できる機能です。

このように、マーカーの上をクリックするとポップアップが表示されます。

コードとしては以下の通りです。(一部抜粋してます)

<l-marker :lat-lng="marker.lat">
   <l-popup :content="marker.contents"></l-popup>
</l-marker>

「l-marker」の中に「l-popup」を入れています。

contentの中に文字や値を入れれば、ポップアップの文字を変えることができます。

l-tooltipについて

tooltipとは、ポップアップとは違いマウスを乗せただけで表示できます。

こんな感じで、表示できます。

コードも先ほどとあまり変えずに

<l-marker :lat-lng="marker.lat">
   <l-tooltip :content="marker.contents"></l-tooltip>
</l-marker>

「l-popup」の部分を「l-tooltip」に変換しただけですね。

まとめ

今回は「leaflet」の「l-popup」「l-tooltip」について紹介しました。

私はポップアップが好きなので、「l-popup」を採用しました。

でも、いろいろ「leaflet」に調べてきましたが、やはりカスタマイズ性が高そうですね。

今度も、また何かありましたら紹介していきたいと思います。

(今度は線をひいてみたいと考えております!)

それでは、今回は短いですがここで筆を置かせていただきます!

最後まで記事をご覧いただきありがとうございました!

コメント

タイトルとURLをコピーしました