Mapillary JS：如何激活/取消激活方向箭头

我需要激活/关闭基于Mapillary JS构建的Web应用程序中的Mapillary图像上的方向箭头。Mapillary JS：如何激活/取消激活方向箭头

我试图建立一个小的代码示例解释....

在这里，您是代码

<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/[email protected]/dist/mapillary.min.js'></script> 
    <link href='https://unpkg.com/[email protected]/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>

最初的情况是没有方向的箭头，你可以看到，因为我开始利用该配置

  { 
       component: { 
        cover: false, 
        direction: false 
       } 
      }

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

我试图管理这个代码这种情况... ...

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

了执行没有错误，但没有改变我的Mapillary图像....

建议/例子吗？

来源

2017-05-23 Cesare

我已经解决了这样...

<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/[email protected]/dist/mapillary.min.js'></script> 
    <link href='https://unpkg.com/[email protected]/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>

来源

2017-05-24 15:22:53 Cesare

Mapillary JS：如何激活/取消激活方向箭头

回答

相关问题