Home Explore Help
Register Sign In
xingjinxing
/
vrHouseDemo
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1

jinx 2 months ago
parent
08850a8af3
commit
bbdc885a76
4 changed files with 81 additions and 6 deletions
Split View Show Diff Stats
  1. 1 1
      index.html
  2. 1 0
      package.json
  3. 46 0
      pnpm-lock.yaml
  4. 33 5
      src/views/details/index.vue

+ 1 - 1
index.html
View File 

@@ -8,7 +8,7 @@
 
   </head>
 
   <body>
 
     <div id="app"></div>
 
-    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-nVI43AYI9qp4rsQMJgN6abyPdn3QRY0&libraries=maps,marker&v=beta" defer></script>
 
+    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-nVI43AYI9qp4rsQMJgN6abyPdn3QRY0&libraries=maps,marker&v=beta" defer></script> -->
 
     <script type="module" src="/src/main.js"></script>
 
 
     <script>

+ 1 - 0
package.json
View File 

@@ -16,6 +16,7 @@
 
     "swiper": "^5.4.5",
 
     "vue": "^3.5.13",
 
     "vue-router": "^4.5.0",
 
+    "vue3-google-map": "^0.22.0",
 
     "xlsx": "^0.18.5"
 
   },
 
   "devDependencies": {

+ 46 - 0
pnpm-lock.yaml
View File 

@@ -29,6 +29,9 @@ importers:
 
       vue-router:
 
         specifier: ^4.5.0
 
         version: 4.5.0(vue@3.5.13)
 
+      vue3-google-map:
 
+        specifier: ^0.22.0
 
+        version: 0.22.0(vue@3.5.13)
 
       xlsx:
 
         specifier: ^0.18.5
 
         version: 0.18.5
 
@@ -360,6 +363,12 @@ packages:
 
     cpu: [x64]
 
     os: [win32]
 
 
+  '@googlemaps/js-api-loader@1.16.8':
 
+    resolution: {integrity: sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==}
 
+
 
+  '@googlemaps/markerclusterer@2.5.3':
 
+    resolution: {integrity: sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==}
 
+
 
   '@jridgewell/gen-mapping@0.3.8':
 
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
 
     engines: {node: '>=6.0.0'}
 
@@ -860,6 +869,9 @@ packages:
 
     resolution: {integrity: sha512-EHlpxMCpHWSAh1dgS6bVeoLAXGnJNdR93aabr4QCGbzOM73o5XmRfM/e5FUqsw3aagP8S8XEWUWFAxnRBnAF0Q==}
 
     engines: {node: ^18.19.0 || >=20.5.0}
 
 
+  fast-deep-equal@3.1.3:
 
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+
 
   figures@6.1.0:
 
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
 
     engines: {node: '>=18'}
 
@@ -1014,6 +1026,9 @@ packages:
 
   jsonfile@6.1.0:
 
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
 
+  kdbush@4.0.2:
 
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
 
+
 
   kolorist@1.8.0:
 
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
 
@@ -1210,6 +1225,9 @@ packages:
 
     resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
 
     engines: {node: '>=18'}
 
 
+  supercluster@8.0.1:
 
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
 
+
 
   superjson@2.2.2:
 
     resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
 
     engines: {node: '>=16'}
 
@@ -1327,6 +1345,12 @@ packages:
 
     peerDependencies:
 
       vue: ^3.2.0
 
 
+  vue3-google-map@0.22.0:
 
+    resolution: {integrity: sha512-g75Y7eKIZNOiN6gDRf+dqqr/odWsIfVo52hc/2kyNd9xcv22fRbQRoUnEEyK5XMaPtH6aTgJvbpYU/H8eDBk8A==}
 
+    engines: {node: '>=16.11.0'}
 
+    peerDependencies:
 
+      vue: ^3
 
+
 
   vue@3.5.13:
 
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
 
     peerDependencies:
 
@@ -1648,6 +1672,13 @@ snapshots:
 
   '@esbuild/win32-x64@0.25.2':
 
     optional: true
 
 
+  '@googlemaps/js-api-loader@1.16.8': {}
 
+
 
+  '@googlemaps/markerclusterer@2.5.3':
 
+    dependencies:
 
+      fast-deep-equal: 3.1.3
 
+      supercluster: 8.0.1
 
+
 
   '@jridgewell/gen-mapping@0.3.8':
 
     dependencies:
 
       '@jridgewell/set-array': 1.2.1
 
@@ -2130,6 +2161,8 @@ snapshots:
 
       strip-final-newline: 4.0.0
 
       yoctocolors: 2.1.1
 
 
+  fast-deep-equal@3.1.3: {}
 
+
 
   figures@6.1.0:
 
     dependencies:
 
       is-unicode-supported: 2.1.0
 
@@ -2255,6 +2288,8 @@ snapshots:
 
     optionalDependencies:
 
       graceful-fs: 4.2.11
 
 
+  kdbush@4.0.2: {}
 
+
 
   kolorist@1.8.0: {}
 
 
   lodash-es@4.17.21: {}
 
@@ -2448,6 +2483,10 @@ snapshots:
 
 
   strip-final-newline@4.0.0: {}
 
 
+  supercluster@8.0.1:
 
+    dependencies:
 
+      kdbush: 4.0.2
 
+
 
   superjson@2.2.2:
 
     dependencies:
 
       copy-anything: 3.0.5
 
@@ -2555,6 +2594,13 @@ snapshots:
 
       '@vue/devtools-api': 6.6.4
 
       vue: 3.5.13
 
 
+  vue3-google-map@0.22.0(vue@3.5.13):
 
+    dependencies:
 
+      '@googlemaps/js-api-loader': 1.16.8
 
+      '@googlemaps/markerclusterer': 2.5.3
 
+      fast-deep-equal: 3.1.3
 
+      vue: 3.5.13
 
+
 
   vue@3.5.13:
 
     dependencies:
 
       '@vue/compiler-dom': 3.5.13

+ 33 - 5
src/views/details/index.vue
View File 

@@ -131,11 +131,10 @@
 
             </div>

           </div>

         </div>

-        <div class="google-map">

-          <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px">

-            <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA"></gmp-advanced-marker>

-            <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA"></gmp-advanced-marker>

-          </gmp-map>

+        <div class="google-map" id="map">

+          <GoogleMap api-key="AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os" style="width: 100%; height: 100%" :center="center" :zoom="15">

+            <Marker :options="{ position: center }" />

+          </GoogleMap>

         </div>

       </div>

     </div>

@@ -148,6 +147,7 @@ import router from "@/router";
 
 import navheader from "@/components/header/index.vue";

 import copyRight from "@/components/copyRight/index.vue";

 import { reactive, ref, toRefs, onBeforeMount, onMounted, computed } from "vue";

+import { GoogleMap, Marker } from "vue3-google-map";

 import Swiper from "swiper";

 import "swiper/css/swiper.css";

 import { NConfigProvider } from "naive-ui";

@@ -176,8 +176,31 @@ const initTab = () => {
 
     },

   });

 };

+

+let map;

+

+const initMap = async () => {

+  const { Map } = await google.maps.importLibrary("maps");

+  map = new Map(document.getElementById("map"), {

+    center: { lat: -34.397, lng: 150.644 },

+    zoom: 8,

+  });

+  addMarker();

+};

+

+// let center = { lat: -34.397, lng: 150.644 };

+const center = { lat: 40.689247, lng: -74.044502 };

+const addMarker = async () => {

+  let center = { lat: -34.397, lng: 150.644 };

+  const marker = new google.maps.marker.AdvancedMarkerElement({

+    map,

+    position: center,

+  });

+};

+

 onMounted(() => {

   initTab();

+  // initMap();

 });

 </script>

 <style lang="scss" scoped>

@@ -544,4 +567,9 @@ onMounted(() => {
 
     }

   }

 }

+.google-map {

+  width: 100%;

+  height: 300px;

+  margin-top: 30px;

+}

 </style>