Vue.js 新手如何製作口罩地圖？一起來貢獻小小力量吧！

$ vue --version
#=> @vue/cli 4.3.1

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# create vue repository
$ vue create mask-map-demo

# set repository specification
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

# change directory
$ cd mask-map-demo

# open server
$ npm run serve

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
};
</script>

<style lang="scss">
</style>

$ npm install bootstrap

<style lang="scss">
@import 'bootstrap/scss/bootstrap';
</style>

<template>
  <div id="app">
    <div class="row no-gutters">
      <!-- 選擇所在區域 -->
      <div class="toolbox col-sm-3 p-2 bg-white">
        <div class="form-group d-flex">
          <label for="cityName" class="col-form-label mr-2 text-right">縣市</label>
          <div class="flex-fill">
            <select id="cityName" class="form-control"></select>
          </div>
        </div>
        <div class="form-group d-flex">
          <label for="area" class="col-form-label mr-2 text-right">地區</label>
          <div class="flex-fill">
            <select id="area" class="form-control"></select>
          </div>
        </div>
      </div>

      <!-- 顯示藥局位置 -->
      <div class="col-sm-9">
        <div id="map"></div>
      </div>
    </div>
  </div>
</template>

<!-- ... -->

<style lang="scss">
  @import 'bootstrap/scss/bootstrap';

  #map {
    position: relative;
    height: 100vh;
  }
</style>

<script>
// 導入內部檔案
import cityName from './assets/cityName.json';

export default {
  name: 'App',
  // 製作元件
  data: () => ({
    cityName,
    // select 先暫時設定為空物件
    select: {},
  }),
  // ...
};
</script>

<template>
  // ...
  // 選擇縣市選單
  <select id="cityName" class="form-control" v-model="select.city">
    <option value="">請選擇縣市</option>
    <option :value="c.CityName" v-for="c in cityName" :key="c.CityName">
      {{ c.CityName }}
    </option>
  </select>

  // ...

  // 選擇地區選單
  <select id="area" class="form-control" v-model="select.area">
    <option value="">請選擇地區</option>
    // 建立專案時若有選擇 Airbnb 相關規範設定的話
    // 需留意過長的程式碼會造成 line length error，換行即可解決此問題
    <option :value="a.AreaName" v-for="a in cityName.find((city) => city.CityName === select.city).AreaList" :key="a.AreaName">
      {{ a.AreaName }}
    </option>
  </select>
  // ...
</template>

<script>
  // ...
  data: () => ({
    cityName,
    select: {
      // 筆者有改過下載的區域資料，故 city 是簡寫的台北市，正常下載是臺北市
      city: '台北市',
      area: '中正區',
    },
  }),
  // ...
</script>

$ npm install --save axios vue-axios

// 外部套件
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

// 內部檔案
import App from './App.vue';

Vue.config.productionTip = false;
// 導入的外部套件要記得使用
Vue.use(VueAxios, axios);

<script>
// ...
export default {
  name: 'App',
  data: () => ({
    cityName,
    select: {
      city: '台北市',
      area: '中正區',
    },
  }),
  components: {
  },
  mounted() {
    const api = 'https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json';
    this.$http.get(api).then((response) => {
      // 將結果印出來看看
      console.log(response);
    });
  },
};
</script>

<script>
// ...
export default {
  name: 'App',
  // Vue.js 元件
  data: () => ({
    // 空陣列 data
    data: [],
    cityName,
    select: {
      city: '台北市',
      area: '中正區',
    },
  }),
  components: {
  },
  mounted() {
    const api = 'https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json';
    this.$http.get(api).then((response) => {
      // 將空陣列 data 指定為遠端獲得的資料，資料僅需取得藥局資訊即可
      this.data = response.data.features;
    });
  },
};
</script>

$ npm install leaflet

<script>
// L 代表 Leaflet
import L from 'leaflet';

export default {
  // ...
};
</script>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- 使用 CDN 方式載入 CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<script>
import L from 'leaflet';

// 設定空物件
let openStreetMap = {};

export default {
  // ...
};
</script>

<script>
import L from 'leaflet';

let openStreetMap = {};

export default {
  // ...
  mounted() {
    // ...
    openStreetMap = L.map('map', {
      center: [25.042474, 121.513729],
      // 可以嘗試改變 zoom 的數值
      // 筆者嘗試後覺得 18 的縮放比例是較適當的查詢範圍
      zoom: 18,
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
      maxZoom: 20,
    }).addTo(openStreetMap);
  },
};
</script>

<script>
  data: () => ({
    // ...
  }),
  computed: {
    pharmacies() {
      return this.data.filter((pharmacy) => {
        if (!this.select.area) {
          return pharmacy.properties.county === this.select.city;
        }
        return pharmacy.properties.town === this.select.area;
      });
    },
  },
  watch: {
    pharmacies(value) {
      console.log(value);
    },
  },
  mounted() {
    // ....
  },
</script>

<script>
  watch: {
    // 當選單的值發生變化，就會執行 updateMap(); 方法更新地圖標記
    pharmacies(value) {
      this.updateMap();
    },
  },
  methods: {
    updateMap() {
      this.pharmacies.forEach((pharmacy) => {
        // 透過藥局經緯度疊加標記
        L.marker([
          pharmacy.geometry.coordinates[1],
          pharmacy.geometry.coordinates[0],
        ]).addTo(openStreetMap);
      });
    },
  },
  mounted: {
    // ....
  },
</script>

<script>
  // ...
  updateMap() {
    // clear markers
    openStreetMap.eachLayer((layer) => {
      if (layer instanceof L.Marker) {
        openStreetMap.removeLayer(layer);
      }
    });

    // add markers
    this.pharmacies.forEach((pharmacy) => {
      // ...
    });
  },
  // ...
</script>

<script>
  methods: {
    updateMap() {
      // ...
      this.pharmacies.forEach((pharmacy) => {
        L.marker([
          pharmacy.geometry.coordinates[1],
          pharmacy.geometry.coordinates[0],
        ]).addTo(openStreetMap).bindPopup(`<p><strong style="font-size: 20px;">${pharmacy.properties.name}</strong></p>
          <strong style="font-size: 16px; color: #d45345;">口罩剩餘：成人 - ${pharmacy.properties.mask_adult ? `${pharmacy.properties.mask_adult} 個` : '未取得資料'} / 兒童 - ${pharmacy.properties.mask_child ? `${pharmacy.properties.mask_child} 個` : '未取得資料'}</strong><br>
          地址: ${pharmacy.properties.address}<br>
          電話: ${pharmacy.properties.phone}<br>
          <small>最後更新時間: ${pharmacy.properties.updated}</small>`);
      });
    },
  },
</script>