Nuxt.jsで「leaflet」を使ってみる!

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

みなさんこんにちは!

最近はNuxt.jsを用いて、フロント側の技術を高めようとしている、イザナギです。

さて、今回はそのNuxt.jsに関する話題です。

前回の記事に引き続き「leaflet」を使用して、アプリを作っていきます!

Rails+Vueで「leaflet」を使おうとしたら、表示がおかしい?
みなさんこんにちは!イザナギです。前回から引き続き、Rails・Vueを用いて何かしらのサービスを作ろうとして頑張ってます!使用するツールとしては、dockerRailsVue.jsで作成しています...

まず、Nuxt.jsをインストール!

まず、はNuxt.jsをインストールしていきます。

いいサイトを見つけましたので、インストールされていない方はこちらをご覧ください!

【Nuxt.js 入門】ゼロからプロジェクトを作成するまでの手順まとめ - UPDATE
どうも、こうすけ(@kosuke_upd)です。 今回は、Nuxt.js 入門として、Nuxt.js とは何か、ゼロからプロジェクトを作成するまでの手順、各ディレクトリの役割、デプロイしてアプリケーションを公開する方法な …

アプリを作る

インストール
ここでは、Nuxt.js プロジェクトの設定と実行について 4 ステップで紹介します。

アプリを作成していきます。

まず作成したいフォルダ内に移動し、以下を入力します。

npx create-nuxt-app <project-name>

いろいろ選択する画面が出てきますが、全てエンターでも問題ないと思います。

(実際私も、大体全てエンターを押していますwww)

終わるといろいろとファイルが作成できたと思います。

nuxt-leaflet

schlunsen/nuxt-leaflet
Nuxt module for leafletjs - - schlunsen/nuxt-leaflet

nuxt.jsで専用でライブラリがあるみたいなので、下記をインストールします。

npm install nuxt-leaflet --save または yarn install nuxt-leaflet

インストール終わった!早速作るぞ!

いや、まだ設定は終わっていません!

最後にnuxt側で「nuxt.config.js」に以下を追加します。

{
  modules: [
    // Simple usage
    'nuxt-leaflet',

    // With options
    ['nuxt-leaflet', { /* module options */ }],
 ]
}

そうすると、「leaflet」が使用できるようになります!

実装

では、実際に実装してみましょう!

<template>
  <div id="map">
   <no-ssr>
     <!-- 気仙沼大島の緯度・経度 -->
     <l-map :zoom="zoom" :center="center">
       <l-tile-layer :url="url"></l-tile-layer>
       <l-marker v-for="marker of marker" :lat-lng="marker"}></l-marker>
     </l-map>
   </no-ssr>
  </div>
</template>

こちらが、表示部分です。これは大体GitHubに乗っているコードと一緒ですね!

l-markerタグでマーカーをおく地図上の場所を指定しています。

<l-map :zoom="zoom" :center="center">

zoomは地図をどのくらい拡大するかを示していて、centerは地図の中心の場所を示しています。

<script>
export default{
  data() {
    return{
      // leafletの設定
      center: [38.856355,141.615593],
      zoom: 13,
      url: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
      // マーカーを置く場所一覧(観光地)
      marker: {
        center:  [38.856355,141.615593],
        kugunaribeach: [38.873171,141.63164],
        mtkame: [38.87373,141.617855],
        tatsumai: [38.830445,141.624526],
        kodanobeach: [38.851971,141.622216],
        bridge: [38.878459,141.606309]
      }
    }
  }
}
</script>

こちらがJavaScriptのコードです。

基本、データを入れているだけですね!

<style scoped>
#map {
    height: 400px;
    width: 400px;
}
</style>

こちらで大きさを調整しています。

異常を設定すると以下のような画像が出てくると思います。

まとめ

今回は簡単にleafletを使ってみました。

これからまた機能を追加していきたいと思います。

ちょっと話が変わりますが、v-forとかv-ifとかって本当に便利ですね。

開発効率が上がりそうです!

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

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

コメント

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