Add bike polyline

.eslintrc

@@ -2,10 +2,11 @@
   "env": {
     "node": true
   },
-  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended"],
+  "extends": ["eslint:recommended", "plugin:vue/vue3-recommended", "prettier"],
   "rules": {
     // override/add rules settings here, such as:
-    // 'vue/no-unused-vars': 'error'
+    "no-unused-vars": "warn",
+    // "vue/max-attributes-per-line": "off",
     "vue/multi-word-component-names": "off" // 關掉禁用單一命名
   }
 }

README.md

@@ -10,15 +10,15 @@
 
 # 所需功能或元件
 
-- []找景點頁面
-- []找飯店頁面
-- []找餐廳頁面
-- []導航欄
-- []地圖
-- []搜尋功能-地區
-- []搜尋功能-地點
-- []景點卡片
-- []照片輪播
+- [ ] 找景點頁面
+- [ ] 找飯店頁面
+- [ ] 找餐廳頁面
+- [ ] 導航欄
+- [ ] 地圖
+- [ ] 搜尋功能-地區
+- [ ] 搜尋功能-地點
+- [ ] 景點卡片
+- [ ] 照片輪播
 
 ### cz 說明
 

package.json

@@ -19,6 +19,7 @@
     "@vue-leaflet/vue-leaflet": "^0.6.1",
     "@vue/compiler-sfc": "3.1.5",
     "eslint": "^8.2.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^8.0.3",
     "vitawind": "^1.2.7",
     "vite": "^2.4.4",

src/components/GoogleMap.vue

@@ -8,37 +8,37 @@
         <!--營運地區 nav-->
       </ul>
       <!--地圖呈現在此-->
-      <div id="map"
-           class="google-map"
-      />
+      <div id="map" class="google-map" />
     </div>
   </div>
 </template>
 
 <script>
-const google = window.google;
+const google = window.google
+
 export default {
-    name: 'GoogleMap',  
-    data() {
+  name: 'GoogleMap',
+  data() {
     return {
       map: null,
       // 預設經緯度在信義區附近
-      lat: 35.0325917,
-      lng: 121.5624999
-    };
+      lat: 25.033508,
+      lng: 121.5614693,
+    }
+  },
+  created() {
+    console.log('test hello')
   },
-    created () {
-        console.log('test hello')
-    }, 
   mounted() {
-    this.initMap();
-    this.setMarker();
+    this.initMap()
+    this.setMarker()
+    this.drawPolyline()
   },
   methods: {
     // 建立地圖
     initMap() {
       // 透過 Map 物件建構子建立新地圖 map 物件實例，並將地圖呈現在 id 為 map 的元素中
-      this.map = new google.maps.Map(document.getElementById("map"), {
+      this.map = new google.maps.Map(document.getElementById('map'), {
         // 設定地圖的中心點經緯度位置
         center: { lat: this.lat, lng: this.lng },
         // 設定地圖縮放比例 0-20
@@ -50,8 +50,8 @@ export default {
         // 設定是否呈現右下角街景小人
         streetViewControl: false,
         // 設定是否讓使用者可以切換地圖樣式：一般、衛星圖等
-        mapTypeControl: false
-      });
+        mapTypeControl: false,
+      })
     },
     // 建立地標
     setMarker() {
@@ -60,12 +60,33 @@ export default {
         // 設定地標的座標
         position: { lat: this.lat, lng: this.lng },
         // 設定地標要放在哪一個地圖
-        map: this.map
-      });
-      console.log(marker);
-    }
-  }
-};
+        map: this.map,
+      })
+      // console.log(marker)
+    },
+    // 繪製路線
+    drawPolyline() {
+      const bikeCoordinates = [
+        { lat: 25.0244841483025, lng: 121.552884577052 },
+        { lat: 25.026234038915, lng: 121.554826502525 },
+        { lat: 25.0270895323619, lng: 121.555797452839 },
+        { lat: 25.0275367194568, lng: 121.556304398895 },
+        { lat: 25.0281370208744, lng: 121.556772780793 },
+        { lat: 25.0288345276624, lng: 121.55716605103 },
+        { lat: 25.0302295341946, lng: 121.557984799345 },
+        { lat: 25.0329417274652, lng: 121.559579369834 },
+      ]
+      new google.maps.Polyline({
+        path: bikeCoordinates,
+        geodesic: true,
+        strokeColor: '#2563EB',
+        strokeOpacity: 1.0,
+        strokeWeight: 4,
+        map: this.map,
+      })
+    },
+  },
+}
 </script>
 <style scoped>
 .google-map {

src/views/HomePage.vue

@@ -1,15 +1,18 @@
 <template>
   <div>
     <Navbar />
+    <GoogleMap />
   </div>
 </template>
 <script>
 import Navbar from '../components/Navbar.vue'
+import GoogleMap from '../components/GoogleMap.vue'
+
 export default {
-    name: 'HomePage',
-    components: { Navbar },
-    created () {
-        console.log('test hello')
-    }
+  name: 'HomePage',
+  components: { Navbar, GoogleMap },
+  created() {
+    console.log('test hello')
+  },
 }
-</script>
+</script>