Wie bekomme ich ein Bild von Google Api Street View von JQuery ajax Anfrage?

Ich verwende Google API zum Abrufen von Street View.Wie bekomme ich ein Bild von Google Api Street View von JQuery ajax Anfrage?

Mein Code:

$.ajax({ 
     url: 'https://maps.googleapis.com/maps/api/streetview?size=600x300&location=46.414382,10.013988&heading=151.78&pitch=-0.76&key=MY_KEY', 
     contentType: "image/jpeg", 
     type: 'GET', 
     cache: false, 
     success: function(data) { 
      console.log('got data', data); 
     }, 
     error: function(error) { 
      console.log('Error', error); 
     } 
     });

Wo MY_KEY mein Google-API-Schlüssel ist und location als pro geografische Breite und Länge bestimmten Ort dynamisch sein. Aber es geht immer in error. Und wenn es erfolgreich ausgeführt wird, möchte ich es in html img Tag binden.

Quelle

2016-04-20 Hashir Hussain

Google API liefert rohe Bilddaten. Um es im Browser anzuzeigen, müssen Sie die Bilddaten auf HTML einstellen.

Es kann viele Ansätze dazu geben. Obwohl alt, Sie können diesen Beitrag sehen - https://stackoverflow.com/a/20285053/926943 - Antwort dieses Kerls ist einfach fantastisch.

Für Ihr spezielles Problem - ich habe den obigen Beitrag verwendet, um eine Lösung zu erstellen. Werfen Sie einen Blick:

HTML:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
<div id="map_div"></div>

JAVASCRIPT:

var imageUrl = "https://maps.googleapis.com/maps/api/streetview?size=600x300&location=23.7610974,90.3720526&heading=310"; 
convertFunction(imageUrl, function(base64Img){ 
     var img = "<img src='"+base64Img+"'>"; 
    $('#map_div').html(img); 
}); 

function convertFunction (url, callback){ 
    var xhr = new XMLHttpRequest(); 
    xhr.responseType = 'blob'; 
    xhr.onload = function() { 
     var reader = new FileReader(); 
     reader.onloadend = function() { 
      callback(reader.result); 
     } 
     reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.send(); 
}

JSFIDDLE:

https://jsfiddle.net/nagbaba/bonLzt67/

Quelle

2016-04-20 07:25:20