String in HTML-Dokument schreiben

Ich habe eine Herausforderung zu versuchen, das Google StreetView für einen bestimmten Ort in einer Webseite einzubetten. Normalerweise würde ich nur die eingebettete iFrame von Google verwenden, aber die Plattform, auf der die Seite gehostet wird, erlaubt keine iFrames.String in HTML-Dokument schreiben

Also, wenn ich einen iFrame nicht verwenden kann, muss ich die traditionelle Art der Verwendung eines reinen HTML-Dokuments und Googles True StreetView Embed-Ansatz gehen. Das ist in Ordnung, außer dass ich die URL so parametrisieren möchte, dass der Benutzer eine Abfragezeichenfolge übergeben kann, um dem StreetView mitzuteilen, welcher Standort angezeigt werden soll.

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

Googles StreetView embed document gibt mir ein gutes Beispiel Street View direkt in ein HTML-Dokument fallen zu lassen.

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

Ich versuche, das Script Abschnitt zu ändern, um die Werte zu den ‚y‘ und ‚x‘ Query-Strings in das Street View-Elemente ‚lat‘ und ‚lng‘ Variablen, so dass die Street View wird immer weitergegeben schreiben an jeder Stelle sein, an der ich als y- und x-Abfragezeichenfolgen in der URL übergebe.

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

Quelle

2016-09-17 MrBubbles

Wenn ich Ihre Frage richtig beantwortet habe, möchten Sie die Längen- und Breitengradwerte aus Abfragezeichenfolge abrufen.

Zuerst müssen Sie Abfrage params erhalten, fügen Sie diese funk-

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

Dann wird Ihr Skript wie folgt ändern -

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

Lassen Sie mich wissen, wenn ich Ihre Frage falsch verstanden.

Quelle

2016-09-17 15:47:48

Das hat fast funktioniert, aber ich habe einen Fehler in der JavaScript-Konsole; js? InvalidValueError: setPosition: nicht ein LatLng oder LatLngLiteral: in Eigenschaft lat: keine Zahl – MrBubbles

Verwenden Sie die Funktion parseInt und konvertieren Latt und Longg in Integer –

Siehe meine aktualisierte Antwort –

String in HTML-Dokument schreiben

Antwort

Verwandte Themen