如何在Google街景中以编程方式启用/禁用箭头控制?

时间:2017-05-24 16:53:47

标签: javascript html google-street-view

我正在使用Google街景和HTML / Javascript构建网络应用程序。

我想启用/禁用图像上的箭头控件。

我无法展示这样做的例子......

建议/示例?

1 个答案:

答案 0 :(得分:1)

我已经用这种方式解决了......

<html>
  <head>
    <meta charset="utf-8">
    <title>test Street View</title>

    <style>
      html, body {
        min-height: 100%;
        min-width: 100%;
        margin: 0;
        padding: 0;
      }
      table {
        width: 95vw;
        height: 95vh;
      }
      td {
        width: 50%;
        height: 50%;
      }
   </style>
  </head>
  <body>
    <div id="maps-images">
     <center>
      <table border=1>
       <!-- first row -->
       <tr id="row1">
         <td id="g_map">
           <div id="google_map" style="width:100%;height:100%"></div>
         </td>
         <td id="google-street-view">
           <div id="google-street-view_images" style="width:100%;height:100%"></div>
         </td>
       </tr>
      </table>
    </center>
    </div>

    <script>
      var panorama;

      function initialize() {
        //### The original pegman position ...
        var pegman_position = {lat: 42.628386111111126, lng: 13.291408333333237};
        var marker;

        //### Add Google Map ...
        var google_map = new google.maps.Map(document.getElementById('google_map'), {
          center: pegman_position,
          zoom: 16
        });

        //### Add Google Street View ...
        window.panorama = new google.maps.StreetViewPanorama(
          document.getElementById('google-street-view_images'), {
            position: pegman_position,
            pov: {
              heading: 34,
              pitch: 10
            }
          });
       google_map.setStreetView(window.panorama);

       //### Modify Street View controls ...
       var panoOptions = {
         scrollwheel: false,
         disableDefaultUI: true,
         clickToGo: false
       };
       window.panorama.setOptions(panoOptions);

      }
    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=<PUT_YOUR_APIKEY_HERE&callback=initialize">
    </script>

  </body>
</html>

在本节中,我已经配置了选项......

       //### Modify Street View controls ...
       var panoOptions = {
         scrollwheel: false,
         disableDefaultUI: true,
         clickToGo: false
       };
       window.panorama.setOptions(panoOptions);

现在,我可以管理如何在街景图像上启用/禁用控件...