如何在google streetview容器中设置高度

时间:2016-10-23 19:14:20

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

我一直试图让google streeview容器(https://developers.google.com/maps/documentation/javascript/examples/streetview-embed)从以下街景位置开始(位于一楼的室内):https://www.google.nl/maps/@51.9158034,6.0661762,3a,75y,49.7h,80.68t/data=!3m7!1e1!3m5!1sZJt5xWlyFiAAAAQvOdRqJQ!2e0!3e2!7i10000!8i5000!6m1!1e1?hl=nl

有任何想法如何完成这项工作?代码似乎不支持高度参数:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="street-view"></div>
    <script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: 51.9158034, lng: 6.0661762},
              pov: {heading: 80.68, pitch: 0},
              zoom: 1
            });
      }
      </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initialize">
    </script>
  </body>
</html>

1 个答案:

答案 0 :(得分:0)

你使用了错误的链接我认为

https://www.google.nl/maps/@51.9181205,6.0705068,3a,75y,351.05h,90t/data=!3m6!1e1!3m4!1sCMQYKN86IDwAAAQqa0k1Xw!2e0!7i13312!8i6656?hl=nl

您还应该获得API密钥

https://developers.google.com/maps/documentation/javascript/get-api-key

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #street-view {
        height: 100%
      }
    </style>
  </head>
  <body>
    <div id="street-view"></div>
    <script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: 51.91812054, lng: 6.0705068},
              pov: {heading: 351.05, pitch: 0},
              zoom: 1
            });
      }
      </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key=[APIKEY]&callback=initialize">
    </script>
  </body>
</html>