letswrite-google-map-api-6/index.html at master · letswritetw/letswrite-google-map-api-6 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>新冠肺炎全球分佈圖 - Google Maps API - August - Let's Write</title>
    <link rel="canonical" href="https://letswritetw.github.io/letswrite-google-map-api-6/"/>
    <meta property="og:url" content="https://letswritetw.github.io/letswrite-google-map-api-6/"/>
    <meta property="fb:app_id" content="911000986339138"/>
    <meta property="og:type" content="website"/>
    <meta property="og:site_name" content="Let's Write"/>
    <meta property="og:title" content="新冠肺炎全球分佈圖 - August - Let's Write"/>
    <meta itemprop="name" content="新冠肺炎全球分佈圖 - August - Let's Write"/>
    <meta name="description" content="這一篇是整合了之前幾篇筆記文，最後會實作出在Google Map上丟標記，標記這次新冠肺炎目前的分佈圖。"/>
    <meta property="og:description" content="這一篇是整合了之前幾篇筆記文，最後會實作出在Google Map上丟標記，標記這次新冠肺炎目前的分佈圖。"/>
    <meta itemprop="description" content="這一篇是整合了之前幾篇筆記文，最後會實作出在Google Map上丟標記，標記這次新冠肺炎目前的分佈圖。"/>
    <meta itemprop="image" content="https://letswritetw.github.io/letswrite-google-map-api-6/fb.jpg?v=4"/>
    <meta property="og:image" content="https://letswritetw.github.io/letswrite-google-map-api-6/fb.jpg?v=4"/>
    <meta property="og:image:width" content="1200"/>
    <meta property="og:image:height" content="630"/>
    <meta property="og:image:alt" content="新冠肺炎全球分佈圖"/>
    <link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="dist/style.min.css?v=1.5.0">

    <!-- Google Tag Manager-->
    <script>
      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-PGQ9WQT');
    </script>

  </head>
  <body>

    <!-- Google Tag Manager (noscript)-->
    <noscript>
      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>

    <div id="app" class="container-fluid">
      <header class="header p-3">
        <h1 class="text-center h4">新冠肺炎全球分佈圖</h1>
        <h6>
          資料來源：
          <a href="https://github.com/CSSEGISandData/COVID-19" target="_blank">JHU CSSE</a>
        </h6>
        <h6>
          開發筆記：
          <a href="https://letswrite.tw/google-map-api-covid/" target="_blank">Let's Write</a>
        </h6>
        <h6>
          原始碼：
          <a href="https://gist.github.com/letswritetw/f386028c675c43250722ed49d5d572b6" target="_blank">Gist</a>
        </h6>
      </header>

      <main class="full-screen" :class="{ 'loading': loadingMask }">
        <div id="map"></div>
      </main>

      <!-- 表列數據 -->
      <aside class="data-list card text-white bg-dark for-mobile-up">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
              <a
                class="nav-link text-white bg-dark"
                :class="{ 'active': tabType == 'confirmed' }"
                href="#"
                @click.prevent="tabType = 'confirmed'"
              >確診</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link text-white bg-dark"
                :class="{ 'active': tabType == 'death' }"
                href="#"
                @click.prevent="tabType = 'death'"
              >死亡</a>
            </li>
          </ul>
        </div>
        <div class="card-body pr-2 pl-0">
          <ul class="list-group list-group-flush">
            <li
              v-for="(data, key) in responseData"
              class="list-group-item d-flex justify-content-between align-items-center text-white bg-dark">
              <a href="#" @click.prevent="moveMapCenter(data.lat, data.lng, data)">
                <span>{{ data.stateCH }}</span>
                <small>{{ data.stateEN }}</small>
              </a>
              <span class="badge badge-secondary badge-pill">
                {{ showCount(data.confirmed, data.death) }}
              </span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- chart modal -->
      <section class="chart-modal for-mobile-up" v-show="toast">
        <div class="toast text-center" :class="{ 'fade show': toast }">
          <div class="spinner-border text-secondary m-5" v-if="toastLoading">
            <span class="sr-only">Loading...</span>
          </div>
          <div class="toast-header" v-if="!toastLoading">
            <strong class="mr-auto">{{ chart.state }}</strong>
            <small>確診：{{ chart.confirmed }}。死亡：{{ chart.death }}</small>
            <button type="button" class="ml-2 mb-1 close" @click="destroyChart">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body" v-show="!toastLoading">
            <canvas id="data-chart"></canvas>
          </div>
        </div>
      </section>

    </div>

    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->

    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="dist/main.min.js?v=1.5.3"></script>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
        https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-analytics.js"></script>

    <script>
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "xxxxxxxxx",
        authDomain: "xxxxxxxxx",
        databaseURL: "xxxxxxxxx",
        projectId: "xxxxxxxxx",
        storageBucket: "xxxxxxxxx",
        messagingSenderId: "xxxxxxxxx",
        appId: "xxxxxxxxx",
        measurementId: "xxxxxxxxx"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>

  </body>
</html>