將查詢字符串寫入HTML文檔

我試圖在網頁上的特定位置嵌入Google街景視圖。通常情況下，我只會使用Google的iFrame嵌入，但託管頁面的平臺不允許使用iFrame。將查詢字符串寫入HTML文檔

所以，如果我不能使用iFrame，我必須去使用純HTML文件和谷歌的真正的StreetView嵌入方法的傳統方式。這很好，只是我想要參數化URL，以便用戶可以傳入查詢字符串來告訴StreetView要顯示的位置。

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

谷歌的StreetView embed document給我滴街景權爲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」的查詢字符串到街景元素的「緯度」和「LNG」變量的值，使街景總會在我傳入的任何位置作爲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>

來源

2016-09-17 MrBubbles

如果我的問題是正確的，您希望從Query字符串中獲取經度和緯度值。

首先，你需要獲得查詢參數，添加此功能 -

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>

讓我知道如果我誤解你的問題。

來源

2016-09-17 15:47:48

這幾乎工作，但我在JavaScript控制檯中出現錯誤; js？InvalidValueError：setPosition：不是LatLng或LatLngLiteral：屬性lat：不是數字 – MrBubbles

使用parseInt函數並將latt和longg轉換爲整數 –

查看我的更新回答 –

將查詢字符串寫入HTML文檔

回答

相關問題