问题描述
我正在处理一个项目，其中包含从 Marzipano 工具 (https://www.marzipano.net/) 生成的大量 360 度图像（全景图）。我不想为每个要显示的全景图创建一个新的 HTML 文件，而是想在每个目录中使用一个 html 文件并根据 URL 搜索 id 更改全景图。当用户单击 href 链接时，我想使用搜索 ID 来指示将显示哪个全景图。我尝试使用 JS 中的搜索参数来做到这一点，但它并不总是正常工作，或者我做错了什么。在某些页面上，当我尝试通过单击 href 链接来显示全景图时出现空白屏幕。
index.js
const searchUrl = window.location.search;
const searchParams = new URLSearchParams(searchUrl);
// display the initial scene.
searchParams.forEach(function(value,key) {
switchScene(scenes[value])
console.log(value,key);
HTML href 链接
<area alt="1" coords="134,375,164,405" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=0" shape="rect" target="_blank"/>
<area alt="2" coords="171,355,201,385" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=1" shape="rect" target="_blank"/>
<area alt="3" coords="176,318,206,348" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=2" shape="rect" target="_blank"/>
<area alt="4" coords="177,282,207,312" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=3" shape="rect" target="_blank"/>
<area alt="5" coords="177,247,277" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=4" shape="rect" target="_blank"/>
<area alt="6" coords="125,267,155,297" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=5" shape="rect" target="_blank"/>
<area alt="7" coords="77,269,107,299" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=6" shape="rect" target="_blank"/>
<area alt="8" coords="28,265,58,295" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=7" shape="rect" target="_blank"/>
<area alt="9" coords="38,332,68,362" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=8" shape="rect" target="_blank"/>
<area alt="10" coords="87,329,117,359" href="Topside Data\TP35\Main Process Deck Mezz\main-process-deck-mezz.html?id=9" shape="rect" target="_blank"/>
显示全景图的 HTML
´´´
<!DOCTYPE html>
<html>
<head>
<title>
Project Title
</title>
<Meta charset="utf-8"/>
<Meta content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<style>
@-ms-viewport { width: device-width; }
</style>
<link href="vendor/reset.min.css" rel="stylesheet"/>
<link href="style.css" rel="stylesheet"/>
</head>
<body class="multiple-scenes">
<div id="pano">
</div>
<div id="sceneList">
<ul class="scenes">
<a class="scene" data-id="main-process-deck-mezz-1" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 1
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-2" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 2
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-3" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 3
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-4" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 4
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-5" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 5
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-6" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 6
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-7" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 7
</li>
</a>
<a class="scene" data-id="main.process-deck-mezz-8" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 8
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-9" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 9
</li>
</a>
<a class="scene" data-id="main-process-deck-mezz-10" href="javascript:void(0)">
<li class="text">
Main Process Deck Mezz 10
</li>
</a>
</ul>
</div>
<div id="titleBar">
<h1 class="sceneName">
</h1>
</div>
<a href="javascript:void(0)" id="autorotatetoggle">
<img class="icon off" src="img/play.png"/>
<img class="icon on" src="img/pause.png"/>
</a>
<a href="javascript:void(0)" id="fullscreenToggle">
<img class="icon off" src="img/fullscreen.png"/>
<img class="icon on" src="img/windowed.png"/>
</a>
<a href="javascript:void(0)" id="sceneListToggle">
<img class="icon off" src="img/expand.png"/>
<img class="icon on" src="img/collapse.png"/>
</a>
<a class="viewControlButton viewControlButton-1" href="javascript:void(0)" id="viewUp">
<img class="icon" src="img/up.png"/>
</a>
<a class="viewControlButton viewControlButton-2" href="javascript:void(0)" id="viewDown">
<img class="icon" src="img/down.png"/>
</a>
<a class="viewControlButton viewControlButton-3" href="javascript:void(0)" id="viewLeft">
<img class="icon" src="img/left.png"/>
</a>
<a class="viewControlButton viewControlButton-4" href="javascript:void(0)" id="viewRight">
<img class="icon" src="img/right.png"/>
</a>
<a class="viewControlButton viewControlButton-5" href="javascript:void(0)" id="viewIn">
<img class="icon" src="img/plus.png"/>
</a>
<a class="viewControlButton viewControlButton-6" href="javascript:void(0)" id="viewOut">
<img class="icon" src="img/minus.png"/>
</a>
<script src="vendor/screenfull.min.js">
</script>
<script src="vendor/bowser.min.js">
</script>
<script src="vendor/marzipano.js">
</script>
<script src="data.js">
</script>
<script src="index.js">
</script>
</body>
</html>
´´´
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）