HTMLドキュメントにクエリ文字列を書き込む

特定の場所のGoogle StreetViewをウェブページに埋め込むことに挑戦しています。通常、GoogleのiFrame埋め込み機能を使用しますが、ページがホストされているプラットフォームではiFrameは使用できません。HTMLドキュメントにクエリ文字列を書き込む

iFrameを使用できない場合は、純粋なHTMLドキュメントとGoogleの真のStreetView埋め込みアプローチを使用する伝統的な方法を実行する必要があります。 URLをパラメータ化して、ユーザーがクエリ文字列を渡して、表示する場所をStreetViewに伝えることができる点を除いて、問題ありません。

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

GoogleのStreetView embed documentは私の右のHTML文書にストリートビューを落とすの偉大な例を示します。私はストリートビュー要素の「緯度」と「LNG」変数に「Y」と「x」は、クエリ文字列に渡された値を書き込むためのスクリプトのセクションを変更しようとしている

<!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>

ストリートビューは常になるように、 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

質問が正しく表示されたら、クエリ文字列から緯度と経度の値を取得する必要があります。

<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>

を私はあなたの質問を誤解している場合、私に教えてください -

まず、あなたは、これが次に

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, " ")); 
    }

次のようにスクリプトを変更する機能 - 追加し、クエリのparamsを取得する必要があります。

出典

2016-09-17 15:47:48

これはほとんど機能しましたが、JavaScriptコンソールでエラーが発生しました。 js？InvalidValueError：setPosition：LatLngまたはLatLngLiteral：プロパティでlat：数字ではない – MrBubbles

parseInt関数を使用してlattとlonggを整数に変換する –

更新された回答を参照 –

HTMLドキュメントにクエリ文字列を書き込む

答えて

関連する問題