如何拦截Google街景全景图上的点击事件?

时间:2017-06-30 19:33:53

标签: javascript html google-maps google-maps-api-3 google-street-view

我有这个使用谷歌地图和谷歌街景的简单HTML / Javascript代码......

<!DOCTYPE html>
<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: true,
         disableDefaultUI: false,
         clickToGo: true
       };
       window.panorama.setOptions(panoOptions);

      }
    </script>

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

  </body>
</html>

我想在用户点击Google街景全景图时截取,但我找不到点击事件来管理官方文档中的这种情况。注意我对position_changed事件不感兴趣....

任何示例/建议/解决方法?

1 个答案:

答案 0 :(得分:1)

我已经以这种方式解决了解决方法..

  var google_street_view_images_div = document.getElementById("google-street-view_images"); //grab the element
  google_street_view_images_div.onclick = function() {
   alert("Click!");
  }