将查询字符串写入 HTML 文档

Question

我在尝试将 Google 街景视图嵌入网页中的特定位置时遇到了挑战。通常，我只会使用 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 文档

Write Query String into HTML Document

html

javascript

google-maps

google-street-view

query-string