Without mobile version

haoshiyou · Jul 9, 2020 · 923e569 · 923e569
1 parent d1fa495
commit 923e569
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 97 deletions.
diff --git a/Icon b/Icon
diff --git a/components/MapView.vue b/components/MapView.vue
@@ -1,9 +1,16 @@
 <template>
   <section>
-    <GMap id="hsy_mapview" ref="hsyGmap"
+    <div class="d-flex justify-content-center">
+      <button class="btn btn-light" @click="getMapBounds" v-if="centerChanged == true" style="margin-top: 20px; z-index: 1; position: fixed">
+        Search in this area
+      </button>
+    </div>
+    <GMap id="hsy_mapview" ref="hsyGmap" 
         :cluster="{options: {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}}"
         :center="{lat: listings[0].location.lat, lng: listings[0].location.lng}"
-        :options="{fullscreenControl: false, streetViewControl: false, mapTypeControl: false, zoomControl: true, gestureHandling: 'cooperative', styles: mapStyle}">
+        :options="{fullscreenControl: false, streetViewControl: false, mapTypeControl: false, zoomControl: true, gestureHandling: 'cooperative', styles: mapStyle}"
+        @center_changed="getMapCenter">
+
       <GMapMarker v-for="listing of listings"
                   :key="listing.id"
                   :position="{lat: listing.location.lat, lng: listing.location.lng}"
@@ -12,6 +19,7 @@
                   @click="popup(listing._id)">
       </GMapMarker>
     </GMap>
+
   </section>
 </template>
 
@@ -23,19 +31,34 @@ export default {
   watch: {
     // A point fix: the GMapMarker changed but the markers on gmap is not re-rendered.
     // TODO:(xinbenlv) remove when resolved [the issue](https://gitlab.com/broj42/nuxt-gmaps/-/issues/8)
-    listings: function (newListings, oldListings) {
+    listings: function(newListings, oldListings) {
       // forced calling the initMarkers
-      this.$refs.hsyGmap.initMarkers();
+      this.$refs.hsyGmap.initMarkers()
     }
   },
+  updated() {
+    this.$nextTick(() => {
+      this.$refs.hsyGmap.initMarkers()
+    })
+  },
   methods: {
     popup(id) {
       let route = this.$router.resolve(`/listing/${id}`)
       window.open(route.href, '_blank')
+    },
+    getMapBounds() {
+      this.$emit('getMapBounds', this.$refs.hsyGmap.map.getBounds())
+    },
+    getMapCenter() {
+      this.centerChanged = true
     }
   },
+  mounted() {
+    // this.mapCenter = this.$refs.hsyGmap.map.getCenter().toJSON();
+  },
   data() {
     return {
+      centerChanged: false,
       pins: {
         selected:
           'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAApVBMVEUAAAD/AAD/AADxHCvyGyjzGDHoFy7vGSnwHi3wHSzsGi3uGivuHivrGyvsHCztGyrtHSzuHCvuHSzsHSzsHSvtHCvtHCrtGyvsHCvsHCvtHSztHCvtHCvtHCvuGyvtHCvtHSztGyvtHSvtHCvtHCztHCvsHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCvtHCv///8Zo6fZAAAANXRSTlMAAQISExUWHyIjKDs8QVJVV1ppe3x+f4KHiJiZmpuxt7vDxMbHys7R4Ont7u/w8fLz9Pb7/qzXrqoAAAABYktHRDZHv4jRAAAAn0lEQVQYGaXBV5KCQABF0eeooxjGnDFnpc13/1uzi7JoQL/Gc/R/v931fr/u5JXSuBK61JVQe/Dy+FNM/kQkyMnpYRnfN1hdOVsgKEqeATZyzsBI1hg4yTkCQ1kj4CBnBQRFyTPAUs4Ay/i+werLKRFTUsyCyFxxFSJlJcx4mSnJuxG6FpTSJtRS2s8Ua5LRm+wOdll9UL3fq/qo2dQ3nvcVIgrnmsRBAAAAAElFTkSuQmCC',
@@ -185,9 +208,9 @@ export default {
         }
       ],
       currentLocation: {}
-    };
+    }
   }
-};
+}
 </script>
 <style>
 </style>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,12 +17,18 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxt/typescript": "^2.8.1",
     "@nuxtjs/axios": "^5.3.6",
     "@nuxtjs/google-analytics": "^2.2.0",
     "@nuxtjs/pwa": "^2.6.0",
+    "@types/mongodb": "^3.1.28",
+    "@types/node": "^12.0.4",
+    "@vue/test-utils": "^1.0.0-beta.27",
+    "ava": "^1.0.1",
     "bootstrap": "^4.1.3",
     "bootstrap-vue": "^2.0.0-rc.11",
     "bottleneck": "^2.18.1",
+    "browser-env": "^3.2.5",
     "chinese-conv": "^1.0.1",
     "cloudinary": "^1.14.0",
     "cookie-universal-nuxt": "^2.0.17",
@@ -37,28 +43,22 @@
     "moment": "^2.24.0",
     "mongodb": "^3.2.6",
     "node-sass": "^4.12.0",
+    "nodemon": "^1.18.9",
     "nuxt": "^2.4.0",
     "nuxt-env": "^0.1.0",
-    "nuxt-gmaps": "^1.1.9",
+    "nuxt-gmaps": "^1.2.0",
     "qrcode-terminal": "^0.12.0",
-    "wechat": "^2.1.0",
-    "wechaty": "^0.26.1",
-    "wechaty-puppet-padpro": "^0.2.1",
-    "ts-node": "^8.5.4",
-    "tsc": "^1.20150623.0",
-    "typescript": "^3.7.4",
-    "@nuxt/typescript": "^2.8.1",
-    "@types/mongodb": "^3.1.28",
-    "@types/node": "^12.0.4",
-    "@vue/test-utils": "^1.0.0-beta.27",
-    "ava": "^1.0.1",
-    "browser-env": "^3.2.5",
-    "nodemon": "^1.18.9",
     "require-extension-hooks": "^0.3.3",
     "require-extension-hooks-babel": "^0.1.1",
     "require-extension-hooks-vue": "^2.0.0",
     "sass-loader": "^8.0.0",
-    "webpack": "^4.39.3"
+    "ts-node": "^8.5.4",
+    "tsc": "^1.20150623.0",
+    "typescript": "^3.7.4",
+    "webpack": "^4.39.3",
+    "wechat": "^2.1.0",
+    "wechaty": "^0.26.1",
+    "wechaty-puppet-padpro": "^0.2.1"
   },
   "devDependencies": {}
 }