Question

我遇到了尝试将Google StreetView嵌入网页中特定位置的挑战。通常情况下，我会使用Google的iFrame嵌入，但托管页面的平台不允许使用iFrame。

因此，如果我不能使用iFrame，我必须采用传统方式使用纯HTML文档和Google真正的StreetView嵌入方法。这很好，除了我想参数化URL，以便用户可以传入一个查询字符串来告诉StreetView要显示的位置。

http://my.site.com/streetview.html&y=37.869260&x=-122.254811

Google的StreetView embed document为我提供了一个将StreetView直接放入HTML文档的好例子。

<!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: 37.869260, lng: -122.254811},
              pov: {heading: 165, pitch: 0},
              zoom: 1
            });
      }
    </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key=[YourAPIKey]&callback=initialize">
    </script>
  </body>
</html>

我正在尝试修改脚本部分，将传递给'y'和'x'查询字符串的值写入StreetView元素的'lat'和'lng'变量，以便StreetView始终位于任何位置我作为URL中的y和x查询字符串传入。

<script>
  var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          zoom: 1
        });
  }
</script>

Answer 1

如果我的问题是正确的，您希望从查询字符串中获取格子和经度值。

首先，您需要获取查询参数，添加此函数 -

    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)", "i"),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

然后按如下方式修改脚本 -

<script>
  var panorama;
  var latt,longg;
  latt = parseFloat(getParameterByName('y'));
  longg = parseFloat(getParameterByName('x')); 
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: latt, lng: longg},
          pov: {heading: 165, pitch: 0},
          zoom: 1
        });
  }
</script>

让我知道如果我误解了你的问题。

将查询字符串写入HTML文档

1 个答案: