导航功能

README.md

@@ -1,24 +1,4 @@
-# vue3-js-example
+# todo
+开启导航等自带功能时，需要隐藏景点介绍相关界面吧？
 
-## Project setup
-```
-npm install
-```
-
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
-
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+还需要景点介绍的音频

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="nan-tou-gu-cheng-dev-container">
-    <div class="poi-info-wrapper" v-if="nearbyPoiIdx !== null">
+    <div class="poi-info-wrapper" v-if="nearbyPoiIdx !== null && !isNavigating">
       <div class="character-text" v-show="isShowText">
         <img
           class="bg"
@@ -9,7 +9,7 @@
           draggable="false"
         />
         <div class="top-bar">
-          <button class="locate">
+          <button class="locate" @click="onClickLocateBtn">
             <img
               class=""
               src="@/assets/images/icon-locate.png"
@@ -68,7 +68,7 @@ const poiList = [
     name: "文士华宅牌匾",
     pos: {
       x: 402.543671,
-      // y: 5.054843,
+      y: 5.054843,
       z: 469.244629,
     },
     character: "character.png",
@@ -81,7 +81,7 @@ const poiList = [
     name: "南头牌匾故事展",
     pos: {
       x: 459.2203,
-      // y: 0.977211,
+      y: 0.977211,
       z: 482.747162,
     },
     character: "character.png",
@@ -97,7 +97,7 @@ const poiList = [
     name: "同源馆",
     pos: {
       x: 483.426147,
-      // y: 2.40841,
+      y: 2.40841,
       z: 486.73587,
     },
     character: "character.png",
@@ -112,7 +112,7 @@ const poiList = [
     name: "信国公文氏祠",
     pos: {
       x: 526.4362,
-      // y: -5.436204,
+      y: -5.436204,
       z: 317.707184,
     },
     character: "character.png",
@@ -125,7 +125,7 @@ const poiList = [
     name: "新安县衙",
     pos: {
       x: 524.923157,
-      // y: 4.446324,
+      y: 4.446324,
       z: 491.287323,
     },
     character: "character.png",
@@ -141,7 +141,7 @@ const poiList = [
     name: "看图说话·历史地图中的深圳",
     pos: {
       x: 520.6005,
-      // y: 4.776612,
+      y: 4.776612,
       z: 562.505859,
     },
     character: "character.png",
@@ -154,7 +154,7 @@ const poiList = [
     name: "观音阁井",
     pos: {
       x: 549.333,
-      // y: 5.090148,
+      y: 5.090148,
       z: 575.6688,
     },
     character: "character.png",
@@ -167,7 +167,7 @@ const poiList = [
     name: "南头古城垣",
     pos: {
       x: 326.0668,
-      // y: -0.16311,
+      y: -0.16311,
       z: 453.774628,
     },
     character: "character.png",
@@ -180,7 +180,7 @@ const poiList = [
     name: "东莞会馆",
     pos: {
       x: 474.870728,
-      // y: 2.023155,
+      y: 2.023155,
       z: 485.552368,
     },
     character: "character.png",
@@ -191,8 +191,8 @@ const poiList = [
   },
 ];
 
-// const nearbyPoiIdx = ref(null);
-const nearbyPoiIdx = ref(1);
+const nearbyPoiIdx = ref(null);
+// const nearbyPoiIdx = ref(7);
 
 /**
  * 人物字幕相关
@@ -213,6 +213,28 @@ function onClickCloseText() {
   isShowText.value = false;
 }
 
+// 导航相关
+const isNavigating = ref(false);
+function onClickLocateBtn() {
+  const poiPos = poiList[nearbyPoiIdx.value].pos;
+  window.SenseMain.startNavigationMicroApp({
+    endName: "南头古城垣",
+    endPos: new window.Laya.Vector3(poiPos.x, poiPos.y, poiPos.z),
+    floorName: "F1",
+    type: "poi",
+    endType: 0,
+  });
+  isAudioPlaying.value = !isAudioPlaying.value;
+  isShowText.value = false;
+  isNavigating.value = true;
+}
+window.SenseMain.emitter.on("NAVIGATE_SUB_APP_END", function () {
+  isNavigating.value = false;
+  // console.log("[demo] 导航结束信息", JSON.stringify(msg));
+  // 输出如下，是否为抵达终点后退出导航，可以查看 endType 字段是否为 0
+  // [demo] 导航终点信息 {"endName":"会议室2002","endPos":{"x":48.59096,"y":-39.54175,"z":0},"floorId":"20200","type":"brand","navChannel":"Brand","nextApp":"qiankun-h5-standard","endType":-1,"floorName":"F20"}
+});
+
 // audio相关
 const isAudioPlaying = ref(false);
 let audio = null;
@@ -254,33 +276,31 @@ function onClickAudioBtn() {
 
 onMounted(() => {
   setTimeout(() => {
-    console.log("mounted!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
-    console.log("window.SenseMain: ", window.SenseMain);
-    // setInterval(() => {
-    //   const pos = window.SenseMain.getTranslate();
-    //   console.log(pos);
-    //   const poiDistancePow2List = poiList.map((item) => {
-    //     return (
-    //       (item.pos.x - pos.x) * (item.pos.x - pos.x) +
-    //       (item.pos.z - -pos.z) * (item.pos.z - -pos.z)
-    //     );
-    //   });
-    //   console.log(poiDistancePow2List);
-    //   let minIndex = -1;
-    //   let minValue = Infinity;
-    //   for (let index = 0; index < poiDistancePow2List.length; index++) {
-    //     if (poiDistancePow2List[index] < minValue) {
-    //       minIndex = index;
-    //       minValue = poiDistancePow2List[index];
-    //     }
-    //   }
-    //   if (minValue < 10 * 10) {
-    //     nearbyPoiIdx.value = minIndex;
-    //     console.log("nearbyPoiIdx: ", nearbyPoiIdx.value);
-    //   } else {
-    //     nearbyPoiIdx.value = null;
-    //   }
-    // }, 5000);
+    setInterval(() => {
+      const pos = window.SenseMain.getTranslate();
+      console.log(pos);
+      const poiDistancePow2List = poiList.map((item) => {
+        return (
+          (item.pos.x - pos.x) * (item.pos.x - pos.x) +
+          (item.pos.z - -pos.z) * (item.pos.z - -pos.z)
+        );
+      });
+      console.log(poiDistancePow2List);
+      let minIndex = -1;
+      let minValue = Infinity;
+      for (let index = 0; index < poiDistancePow2List.length; index++) {
+        if (poiDistancePow2List[index] < minValue) {
+          minIndex = index;
+          minValue = poiDistancePow2List[index];
+        }
+      }
+      if (minValue < 10 * 10) {
+        nearbyPoiIdx.value = minIndex;
+        console.log("nearbyPoiIdx: ", nearbyPoiIdx.value);
+      } else {
+        nearbyPoiIdx.value = null;
+      }
+    }, 5000);
   }, 5000);
 });
 </script>
@@ -293,13 +313,15 @@ onMounted(() => {
   right: 0;
   bottom: 0;
   z-index: 50;
+  pointer-events: none;
   > .poi-info-wrapper {
+    pointer-events: initial;
     position: absolute;
     left: 50%;
     bottom: 0vh;
     transform: translate(-50%, 0);
-    width: 38.3vh;
-    height: 38.3vh;
+    width: 36vh;
+    height: 36vh;
     > .character-text {
       position: absolute;
       bottom: 95%;