udpate

src/components/basic/loading.vue

@@ -36,7 +36,7 @@
   </transition>
 </template>
 <script lang="ts" setup>
-  import { ref, computed, onMounted, defineProps, watchEffect, nextTick } from 'vue';
+  import { ref, computed, onMounted, watchEffect, nextTick } from 'vue';
   import { useApp } from '/@/hooks/userApp';
   import { useSceneStore } from '/@/store/modules/scene';
   import loadLOGO from '/@/assets/images/loading.jpg';

src/components/custom/introPanel/image-grid.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
+  import { onMounted } from 'vue';
 
   const emits = defineEmits(['clickImage']);
   interface ImageProps {

src/components/custom/introPanel/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="layer" v-if="showPanel">
     <div class="layer-content animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
-      <div class="layer-title"> xxxx</div>
+      <div class="layer-title">
+        <span>xxxx</span>
+        <i
+          @click.stop="handleClose"
+          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
+        ></i>
+      </div>
       <div class="main">
         <tabs>
           <tab name="简介">
@@ -11,7 +17,7 @@
             <ImageGrid :data="MockImageList" @click-image="handleViewer" />
           </tab>
           <tab name="地图">
-            <div></div>
+            <Map />
           </tab>
         </tabs>
       </div>
@@ -32,6 +38,7 @@
   import ImageGrid from './image-grid.vue';
   import IntroText from './intro-text.vue';
   import ImageViewer from './image-view.vue';
+  import Map from './map.vue';
 
   import {} from 'vue';
   import { unref } from 'vue';
@@ -91,7 +98,9 @@
       url: 'https://4dkk.4dage.com/head/15915816041/head_1673602197881.png?m=1673602198194',
     },
   ];
-
+  const handleClose = () => {
+    appStore.setShowIntroPanel(false);
+  };
   onMounted(() => {
     setTimeout(() => {
       appStore.setShowIntroPanel(true);
@@ -100,6 +109,14 @@
 </script>
 
 <style lang="scss" scoped>
+  .close-btn {
+    position: absolute;
+    right: 20px;
+    // top: 36px;
+    font-size: 18px;
+    cursor: pointer;
+    z-index: 100;
+  }
   .layer {
     width: 100%;
     position: fixed;
@@ -134,12 +151,15 @@
       line-height: 50px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       font-size: 18px;
+      position: relative;
       //   color: white;
     }
     .main {
       flex: 1;
       display: flex;
       overflow: hidden;
+      -webkit-overflow-scrolling: touch;
+      pointer-events: all;
     }
   }
 </style>

src/components/custom/introPanel/map.vue

@@ -0,0 +1,89 @@
+<template>
+  <div ref="mapRef" class="map"> </div>
+</template>
+<script lang="ts" setup>
+  import { unref, ref } from 'vue';
+  import { useScript } from '/@/hooks/useScript';
+  import { onMounted } from 'vue';
+
+  const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=e661b00bdf2c44cccf71ef6070ef41b8';
+  const { toPromise } = useScript({ src: A_MAP_URL });
+  const mapRef = ref<HTMLDivElement | null>(null);
+  const initMap = async () => {
+    await toPromise();
+    console.log('mapRef', unref(mapRef));
+    const AMap = (window as any).AMap;
+    console.log('AMap', AMap);
+    // const center = [120.262337, 30.178285]
+    const map = new AMap.Map(unref(mapRef), {
+      zoom: 15,
+      resizeEnable: true,
+      // center: center,
+      // viewMode: '3D',
+      // resizeEnable: true,
+      // floorControl: true,
+      // showIndoorMap: true
+    });
+    AMap.plugin(
+      [
+        'AMap.Scale',
+        'AMap.Geocoder',
+        'AMap.Toolbar',
+        'AMap.AutoComplete',
+        'AMap.PlaceSearch',
+        'AMap.Geolocation',
+      ],
+      function () {
+        const autoOptions = {
+          city: '珠海',
+          input: 'location',
+        };
+        const autocomplete = new AMap.Autocomplete(autoOptions);
+        const placeSearch = new AMap.PlaceSearch({
+          city: '珠海', // 默认城市，一定要有，不然没有放大效果
+          map: map, // 地图，选中会有放大功能，绑定上面创建的地图即可
+        });
+        AMap.Event.addListener(autocomplete, 'select', function (e: any) {
+          placeSearch.search(e.poi.name);
+          console.log('location', e.poi.location); // 获取选中的的地址的经纬度
+        });
+        var geolocation = new AMap.Geolocation({
+          // 是否使用高精度定位，默认：true
+          enableHighAccuracy: true,
+          // 设置定位超时时间，默认：无穷大
+          timeout: 10000,
+          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+          buttonOffset: new AMap.Pixel(10, 20),
+          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+          zoomToAccuracy: true,
+          //  定位按钮的排放位置,  RB表示右下
+          buttonPosition: 'RB',
+        });
+
+        geolocation.getCurrentPosition();
+        AMap.Event.addListener(geolocation, 'complete', onComplete);
+        AMap.Event.addListener(geolocation, 'error', onError);
+
+        function onComplete(data: any) {
+          console.log('data', data);
+          // data是具体的定位信息
+        }
+
+        function onError(data: any) {
+          console.log('data', data);
+          // 定位出错
+        }
+      },
+    );
+  };
+  onMounted(() => {
+    initMap();
+  });
+</script>
+<style lang="scss" scoped>
+  .map {
+    width: 100%;
+    height: 100%;
+    padding-bottom: -80px;
+  }
+</style>

src/components/hotspot/metas/image-view.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, computed, nextTick, defineProps } from 'vue';
+  import { onMounted, computed, nextTick } from 'vue';
   import { tagType, useSceneStore } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
 

src/components/hotspot/metas/metas-image.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, nextTick, ref, computed, defineProps } from 'vue';
+  import { onMounted, nextTick, ref, computed } from 'vue';
   import { tagType } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
   // import { useApp } from '/@/hooks/userApp';

src/components/hotspot/metas/metas-video.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, nextTick, ref, computed, defineProps } from 'vue';
+  import { onMounted, nextTick, ref, computed } from 'vue';
   import { changeUrl } from '../common';
   import { tagType } from '/@/store/modules/scene';
   import { watchEffect } from 'vue';

src/components/hotspot/metas/metas-web.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, defineProps } from 'vue';
+  import { computed } from 'vue';
   import { tagType } from '/@/store/modules/scene';
 
   const props = defineProps({

src/components/hotspot/tag-view.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-  import { defineEmits, onMounted, computed } from 'vue';
+  import { onMounted, computed } from 'vue';
   import metasImage from './metas/metas-image.vue';
   import imageView from './metas/image-view.vue';
   import browser from '/@/utils/browser';

src/hooks/useScript.ts

@@ -0,0 +1,46 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface ScriptOptions {
+  src: string;
+}
+
+export function useScript(opts: ScriptOptions) {
+  const isLoading = ref(false);
+  const error = ref(false);
+  const success = ref(false);
+  let script: HTMLScriptElement;
+
+  const promise = new Promise((resolve, reject) => {
+    onMounted(() => {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = function () {
+        isLoading.value = false;
+        success.value = true;
+        error.value = false;
+        resolve('');
+      };
+
+      script.onerror = function (err) {
+        isLoading.value = false;
+        success.value = false;
+        error.value = true;
+        reject(err);
+      };
+
+      script.src = opts.src;
+      document.head.appendChild(script);
+    });
+  });
+
+  onUnmounted(() => {
+    script && script.remove();
+  });
+
+  return {
+    isLoading,
+    error,
+    success,
+    toPromise: () => promise,
+  };
+}