Mapillary JS: wie man Richtungspfeile aktiviert/deaktiviert

Ich muss Richtungspfeile auf Mapillary Bilder in einer Web-Anwendung, die auf Mapillary JS gebaut wird, aktivieren/deaktivieren.Mapillary JS: wie man Richtungspfeile aktiviert/deaktiviert

Ich habe versucht, ein wenig Code Beispiel erstellen Pfeile zu erklären ....

Hier sind Sie den Code

<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>

Die Ausgangssituation ist, ohne die Richtung, wie Sie sehen können, weil ich mit dieser Konfiguration starten

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

ich es eine Auswahl über dem Bild unter Verwendung ändern möchten, und wenn ich wählen sie „mit Pfeilen“ ich möchte die Pfeile zeigen ....

Ich habe versucht, diese Situation mit diesem Code zu verwalten ...

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

, die ohne Fehler, aber keine Änderungen sind auf meinem Mapillary Bild ausführen ....

Anregungen/Beispiele?

Quelle

2017-05-23 Cesare

ich auf diese Weise gelöst haben ...

<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>

Quelle

2017-05-24 15:22:53 Cesare

Mapillary JS: wie man Richtungspfeile aktiviert/deaktiviert

Antwort

Verwandte Themen