Javascript Mapillary JS：如何激活/停用方向箭头_Javascript_Html

Javascript Mapillary JS：如何激活/停用方向箭头

javascript html

Javascript Mapillary JS：如何激活/停用方向箭头,javascript,html,Javascript,Html,我需要在基于Mapillary JS构建的web应用程序中激活/停用Mapillary图像上的方向箭头我试图构建一个小代码示例来解释这是密码 <html> <head> <meta charset='utf-8' /> <title></title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=

我需要在基于Mapillary JS构建的web应用程序中激活/停用Mapillary图像上的方向箭头

我试图构建一个小代码示例来解释

这是密码

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.js'></script>
    <link href='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.css' rel='stylesheet' />

    <style>
        html, body { margin: 0; padding: 0; height: 100%; }
    </style>
</head>

<body>
  <div id="titlebar">
    <center>
        Select option:
        <select onchange="onSelect.call(this, event)">
          <option value="with">With arrows</option>
          <option value="without">Without arrows</option>
        </select>
    </center>
  </div>

  <div id="xxx">
     <table border=1>
      <div id="mly"  style="width:100%;height:100%">
      </div>
     </table>
  </div>

  <script>
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var mly = new Mapillary.Viewer(
            'mly',
            // Replace this with your own client ID from mapillary.com
            'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi',
            'Sx1k3lLpdFU1TWS-8u_Y-w',
            {
                component: {
                    cover: false,
                    direction: false
                }
            }
        );

        mly.setCenter(pegman_position.lat, pegman_position.lon);

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly.resize(); });

        function onSelect(event) {
            switch (this.options[this.selectedIndex].text) {
               case "With arrows":
                 var theComponent = mly.getComponent('direction');
                 theComponent.configure({direction: true});
                 break;
               case "Without arrows":
                 break;
              }
        }

  </script>
</body>
</html>

我想使用图像上方的选择修改它，如果我选择“带箭头”，我想显示箭头

我试着用这个代码来处理这种情况

              case "With arrows":
                 var theComponent = mly.getComponent('direction');
                 theComponent.configure({direction: true});
                 break;

在没有错误的情况下执行，但在我的地图图像上没有任何更改

建议/示例？

我用这种方式解决了

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.js'></script>
    <link href='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.css' rel='stylesheet' />

    <style>
        html, body { margin: 0; padding: 0; height: 100%; }
    </style>
</head>

<body>
  <div id="titlebar">
    <center>
        Select option:
        <select onchange="onSelect.call(this, event)">
          <option value="with">With arrows</option>
          <option value="without">Without arrows</option>
        </select>
    </center>
  </div>

  <div id="xxx">
     <table border=1>
      <div id="mly"  style="width:100%;height:100%">
      </div>
     </table>
  </div>

  <script>
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var mly = new Mapillary.Viewer(
            'mly',
            // Replace this with your own client ID from mapillary.com
            'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi',
            'Sx1k3lLpdFU1TWS-8u_Y-w',
            {
                component: {
                    cover: false
                }
            }
        );

        mly.setCenter(pegman_position.lat, pegman_position.lon);

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly.resize(); });

        function onSelect(event) {
            switch (this.options[this.selectedIndex].text) {
               case "With arrows":
                 mly.activateComponent("direction");
                 mly.activateComponent("sequence");
                 break;
               case "Without arrows":
                 mly.deactivateComponent("direction");
                 mly.deactivateComponent("sequence");
                 break;
              }
        }

  </script>
</body>
</html>


html，正文{边距：0；填充：0；高度：100%；}
选择选项：
用箭
没有箭
var pegman_位置={lat:42.628386111111126，lng:13.291408333333237}；
var mly=新的Mapillary.Viewer(
“mly”，
//将其替换为mapillary.com中您自己的客户端ID
“QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi”，
“Sx1k3lLpdFU1TWS-8u_Y-w”，
{
组成部分：{
封面：假
}
}
);
mly.设置中心（pegman_position.lat、pegman_position.lon）；
//查看器大小是动态的，因此每次窗口大小更改时都应调用resize
addEventListener（“resize”，function（）{mly.resize（）；}）；
函数onSelect（事件）{
开关（this.options[this.selectedIndex].text）{
“带箭头”的情况：
mly.激活组件（“方向”）；
mly.激活成分（“序列”）；
打破
“无箭头”情况：
mly.取消激活组件（“方向”）；
mly.停用组件（“序列”）；
打破
}
}

<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <script src='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.js'></script>
    <link href='https://unpkg.com/mapillary-js@2.5.0/dist/mapillary.min.css' rel='stylesheet' />

    <style>
        html, body { margin: 0; padding: 0; height: 100%; }
    </style>
</head>

<body>
  <div id="titlebar">
    <center>
        Select option:
        <select onchange="onSelect.call(this, event)">
          <option value="with">With arrows</option>
          <option value="without">Without arrows</option>
        </select>
    </center>
  </div>

  <div id="xxx">
     <table border=1>
      <div id="mly"  style="width:100%;height:100%">
      </div>
     </table>
  </div>

  <script>
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var mly = new Mapillary.Viewer(
            'mly',
            // Replace this with your own client ID from mapillary.com
            'QjI1NnU0aG5FZFZISE56U3R5aWN4ZzowODkzY2RjNjM1ZmEwYTVi',
            'Sx1k3lLpdFU1TWS-8u_Y-w',
            {
                component: {
                    cover: false
                }
            }
        );

        mly.setCenter(pegman_position.lat, pegman_position.lon);

        // Viewer size is dynamic so resize should be called every time the window size changes
        window.addEventListener("resize", function() { mly.resize(); });

        function onSelect(event) {
            switch (this.options[this.selectedIndex].text) {
               case "With arrows":
                 mly.activateComponent("direction");
                 mly.activateComponent("sequence");
                 break;
               case "Without arrows":
                 mly.deactivateComponent("direction");
                 mly.deactivateComponent("sequence");
                 break;
              }
        }

  </script>
</body>
</html>