fix: 导航

index.html

@@ -53,14 +53,18 @@
         </div>
     </div>
 
-    <div id="mark" style="width: 100vw;height: 100vh; background:rgba(0,0,0,0.7); position:absolute; top:0px; display: none; backdrop-filter:blur(10px); align-items: center;justify-content: center;">
+    <div id="mark" style="width: 100vw;height: 100vh; background:rgba(0,0,0,0.7); position:absolute; display: none; top:0px;  backdrop-filter:blur(10px); align-items: center;justify-content: center;">
         
     </div>
+    <!-- 地图容器 -->
+    <div id="mapContainer" style="width: 100vw;height: 960px; position: absolute; visibility: hidden; top: 480px;background-color: #eee;"></div>
     
     <script src="/iflyrec/crypto-js.js"></script>
     <script src="/iflyrec/index.umd.js"></script>
     <script src="/tts/base64.js"></script>
     <script src="/tts/index.umd.js"></script>
+    <script src="/qm/three.js"></script>
+    <script src="/qm/MainMap_QM_label.js"></script>
     <script type="module" src="/tts/index.js"></script>
     <script type="module" src="/main.js"></script>
 </body>

main.js

@@ -25,6 +25,14 @@ window.onload = () => {
     document.addEventListener("click",()=>{
         window.hello();
     });
+
+    MainMap_QM.init(()=>{},{
+        build : 0,
+        floor : 0,
+        navPoint : 3,
+        angle : 0,
+        pathStyle:"3D"
+    }); 
 }
 
 let addMy = () => {
@@ -51,7 +59,7 @@ window.audioStart = () => {
             addMy();  //添加我气泡
             setScrollPosition();
         }
-        //callAiModel("南京大排档有什么优惠");
+        //callAiModel("服务台在哪里");
     }
 }
 
@@ -156,7 +164,8 @@ function callBack(str){
                         opt.txt = opt.txt.substring(0, opt.txt.length-2);
                         if(obj.data.value.length === 1){
                             addBackItemText(`${obj.data.value[0].name} 位于商场 ${opt.txt},\n下方为您推荐导航路线`);
-                            addItemImg("./assets/map.png");
+                            console.log(obj.data.value[0]["house_number"])
+                            addItemImg("./assets/map.png",pathFun,obj.data.value[0]["house_number"]);
                             addQRCode(); 
                             if(obj.data.recommend && obj.data.recommend.length>0){
                                 addBackItemText("相关品牌推荐：","",false);
@@ -178,10 +187,11 @@ function callBack(str){
             case "facility" :
                 if(obj.data.value === "服务台"){
                     addBackItemText(`客服中心在二期七楼，下方为您推荐导航到${obj.data.value}的路线`);
+                    addItemImg("./assets/map1.png",pathFac,"fwt");
                 }else{
                     addBackItemText(`下方为您推荐导航到最近${obj.data.value}的路线`);
+                    addItemImg("./assets/map1.png");
                 }
-                addItemImg("./assets/map1.png");
                 addQRCode(); 
                 break;
             case "weather" :
@@ -221,7 +231,7 @@ function callBack(str){
                 break;
             case "washroom" :    //洗手间
                 addBackItemText(`下方为您推荐导航到最近洗手间的路线`);
-                addItemImg("./assets/map1.png");
+                addItemImg("./assets/map1.png",pathFac,"xsj");
                 addQRCode(); 
                 addBackItemText(`网红洗手间推荐：`,"",false);
                 addClickWCList(addWrapper(),window.clickWashroom);
@@ -239,7 +249,44 @@ function callBack(str){
     }
     setScrollPosition();
 }
+// 导航设施
+window.pathFac = function(event){
+    window.isplayHello = false;  //停止播放招呼语音
+    window.stopTTS();
+    let mark = document.getElementById("mark");
+    mark.style.display = "flex";
+    document.getElementById("mapContainer").style.visibility = "visible";
+    let nodeObject = Map_QM.pathIcon({"type":event.target.dataset.num});
+    Map_QM.pathNode(nodeObject,()=>{
+
+    });
+    mark.addEventListener("click", ()=>{
+        mark.style.display = "none";
+        document.getElementById("mapContainer").style.visibility = "hidden";
+        Map_QM.showFloor(0);
+        window.isplayHello = true;
+        window.hello();
+    })
+}
+// 导航店铺
+window.pathFun = function(event){
+    window.isplayHello = false;  //停止播放招呼语音
+    window.stopTTS();
+    let mark = document.getElementById("mark");
+    mark.style.display = "flex";
+    document.getElementById("mapContainer").style.visibility = "visible";
+    let nodeObject = Map_QM.shopNumToNavPoint({"houseNumber":event.target.dataset.num},"shop");
+    Map_QM.pathNode(nodeObject,()=>{
 
+    });
+    mark.addEventListener("click", ()=>{
+        mark.style.display = "none";
+        document.getElementById("mapContainer").style.visibility = "hidden";
+        Map_QM.showFloor(0);
+        window.isplayHello = true;
+        window.hello();
+    })
+}
 //点击优惠券弹窗
 window.clickCoupon = function(event){
     console.log(event.target.dataset.pop);

public/style.css

@@ -201,3 +201,90 @@ li.right div {
     top: 2px;
     color: #FFF;
 }
+
+
+.north{
+    position: absolute;
+    right:100px;
+    top: 100px;
+}
+.floor_map{
+    border-radius: 5px; 
+    width: 48px; 
+    background: rgba(0, 0, 0, 0.80); 
+    z-index:512;
+    display: none;
+}
+.floor_map::before{
+    content: "";
+    display: inline-block;
+    border: 6px solid rgba(0, 0, 0, 0.80);
+    border-radius: 3px;
+    transform: rotateZ(135deg);
+    border-left-color: transparent;
+    border-top-color: transparent;
+    position: absolute;
+    top: 50%;
+    left: -5px;
+    margin-top: -6px;
+} 
+.dir_map{
+    border-radius: 5px; 
+    height: 44px;
+    background: rgba(0, 0, 0, 0.80);
+    display: flex;
+    z-index: 510;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 4px 8px 4px 4px;
+    gap: 8px;
+}
+.dir_map span{
+    color: #fff;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.dir_map::before{
+    content: "";
+    display: inline-block;
+    border: 6px solid rgba(0, 0, 0, 0.80);
+    border-radius: 3px;
+    transform: rotateZ(45deg);
+    border-left-color: transparent;
+    border-top-color: transparent;
+    position: absolute;
+    left: 50%;
+    bottom: -5px;
+    margin-left: -6px;
+} 
+.dir-divimg{
+    background-color: #fff;
+    border-radius: 5px;
+    height: 40px;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+}
+.dir-divimg img{
+    width: 32px;
+    height: 32px;
+}
+.map_label{
+    color:#000000;
+    font-size: 14px; 
+    z-index: 90; 
+    text-shadow: 1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
+    pointer-events:none;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    align-items: center;
+}

util.js

@@ -137,12 +137,16 @@ var QMUtil = {
         }
     },
     //单图片
-    addItemImg:function (imgUrl){
+    addItemImg:function (imgUrl, clickFun=null,houseNum){
         let li_img = document.createElement("li");
         li_img.className = "left"
         document.getElementById("cont").appendChild(li_img);
         let w = (scaleW/(1080/535));
-        li_img.innerHTML = `<img width="${w}" src="${imgUrl}" />`;
+        li_img.innerHTML = `<img width="${w}" style="pointer-events:none;" src="${imgUrl}" />`;
+        li_img.dataset.num = houseNum || "";
+        if(clickFun){
+            li_img.addEventListener("click", clickFun);
+        }
     },
     //单图片
     addItemSmallImg:function (imgUrl){