将查询字符串写入 HTML 文档答案

【问题标题】：Write Query String into HTML Document将查询字符串写入 HTML 文档
【发布时间】：2016-09-17 14:33:15
【问题描述】：

我在尝试将特定位置的 Google StreetView 嵌入网页中时遇到了挑战。通常，我只会使用 Google 的 iFrame embed，但托管页面的平台不允许 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>

【问题讨论】：

标签： javascript html google-maps query-string google-street-view

【解决方案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>

如果我误解了你的问题，请告诉我。

【讨论】：

这几乎成功了，但我在 JavaScript 控制台中遇到了错误； js?InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
使用parseInt函数，将latt和longg转换成整数
我将 parseInt 更改为 parseFloat 因为我想确保它支持浮点值，但是是的，您的解决方案运行良好！谢谢！！