Ich benutze Google Place API.
Was möchte ich von Ort für Tipphilfe erhalten.
Also, was ich getan habe ist
var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM"; //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access
var language = "en"; //'en' for English, 'nl' for Nederland's Language
var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu";
$.getJSON(Auto_Complete_Link , function(result)
{
$.each(result, function(i, field)
{
//$("div").append(field + " ");
//alert(i + "=="+ field);
console.error(i + "=="+ field);
});
});
In welchem Link bitte ich also -
Und wenn ich zu diesem Link mit dem Browser gehe, kann ich eine ähnliche Ausgabe erhalten (bitte versuchen Sie es zu ck) -
Aber wenn ich es mit jQuery's .getJSON oder .ajax versuche, wird meine Anfrage mit dieser Nachricht blockiert.
.
SO das XMLHTTPRequest ist blockiert wegen -
Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Origin 'null' hat daher keinen Zugriff.
Ich habe in StackOverflow für diese Problemlösung eingecheckt und gehe durch hier , [hier 4 und hier , kann aber meine Lösung nicht perfekt bekommen.
Kann jemand mich bitte aufklären?
AJAX-Anfragen sind nur möglich, wenn Port, Protokoll und Domäne von Sender und Empfänger gleich sind, andernfalls führt dies zu CORS. CORS steht für Cross-Origin Resource Sharing und muss serverseitig unterstützt werden.
Lösung
JSONP
JSONP oder "JSON with padding" ist eine Kommunikationstechnik, die in JavaScript-Programmen verwendet wird, die in Webbrowsern ausgeführt werden, um Daten von einem Server in einer anderen Domäne anzufordern. Dies ist bei typischen Webbrowsern aufgrund der Origin-Richtlinie nicht zulässig.
So etwas könnte dir helfen zu paaren .. :)
$.ajax({
url: Auto_Complete_Link,
type: "GET",
dataType: 'jsonp',
cache: false,
success: function(response){
alert(response);
}
});
ok also so machen wir es in javascript ... google haben dafür eigene funktionen ....
link: https://developers.google.com/maps/documentation/javascript/places#place_search_requests
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
types: ['store']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
jeder möchte Zugriff auf die Orts-ID erhalten und so. So machen wir das .... In der Rückruffunktion haben wir den JSONArray von Orten, die von Google zurückgegeben werden var place = results[i];
Sie können bekommen, was Sie möchten
console.log(place.name);
console.log(place.place_id);
var types = String(place.types);
types=types.split(",");
console.log(types[0]);
Ich konnte das Problem durch Erstellen einer PHP -Datei auf dem gleichen Server wie meine Javascript-Datei lösen. Dann verwenden Sie cURL, um die Daten von Google abzurufen und an meine js-Datei zu senden.
PHP-Datei
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://maps.googleapis.com/maps/api/place/textsearch/xml?query=" . $_POST['search'] . "&key=".$api);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
echo $output;
Javascript-Datei
var search = encodeURI($("#input_field").val());
$.post("curl.php", { search: search }, function(xml){
$(xml).find('result').each(function(){
var title = $(this).find('name').text();
console.log(title);
});
});
Mit dieser Lösung bekomme ich keine CORS-Fehler.
Google bietet eine API-Client-Bibliothek:
<script src="https://apis.google.com/js/api.js" type="text/javascript"></script>
Es kann Google API-Anforderungen für Sie ausführen, wenn Sie den API-Pfad und die Parameter angeben:
var restRequest = gapi.client.request({
'path': 'https://people.googleapis.com/v1/people/me/connections',
'params': {'sortOrder': 'LAST_NAME_ASCENDING'}
});
Da die Bibliothek über eine Google-Domäne bereitgestellt wird, kann sie ohne Probleme mit CORS die Google-APIs aufrufen.
Ich habe so auf die Google Maps API zugegriffen
$scope.getLocationFromAddress = function(address) {
if($scope.address!="Your Location"){
$scope.position = "";
delete $http.defaults.headers.common['X-Requested-With'];
$http(
{
method : 'GET',
url : 'https://maps.googleapis.com/maps/api/geocode/json?address='+ address+'&key=AIzaSyAAqEuv_SHtc0ByecPXSQiKH5f2p2t5oP4',
}).success(function(data, status, headers, config) {
$scope.position = data.results[0].geometry.location.lat+","+data.results[0].geometry.location.lng;
}).error(function(data, status, headers, config) {
debugger;
console.log(data);
});
}
}
Nachdem ich die Antwort von @sideshowbarker gefunden hatte, funktionierte es:
Und dann diesen Ansatz verwendet, um es zum Laufen zu bringen:
const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=500&key=[API KEY]"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.json())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))
Weitere Informationen finden Sie in der Antwort unter dem obigen Link.
Auf Client-Seite gibt es keine Möglichkeit, ajax
abzurufen Google Place API
, verwenden Sie weder jsonp
(Syntaxfehler :), noch haben wir cors Problem getroffen,
Die einzige Möglichkeit auf der Clientseite ist die Verwendung der Google Javascript Library https://developers.google.com/maps/documentation/javascript/tutorial
Oder Sie können Google Place API auf der Serverseite abrufen und dann Ihre eigene API für Ihre Clientseite erstellen.
Hallo,
Bitte versuchen Sie es mit der Google Entfernungsmatrix
var Origin = new google.maps.LatLng(detectedLatitude,detectedLongitude);
var destination = new google.maps.LatLng(latitudeVal,langtitudeVal);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [Origin],
destinations: [destination],
travelMode: 'DRIVING',
unitSystem: google.maps.UnitSystem.METRIC,
durationInTraffic: true,
avoidHighways: false,
avoidTolls: false
}, response_data);
function response_data(responseDis, status) {
if (status !== google.maps.DistanceMatrixStatus.OK || status != "OK"){
console.log('Error:', status);
// OR
alert(status);
}else{
alert(responseDis.rows[0].elements[0].distance.text);
}
});
Wenn Sie JSONP verwenden, wird in der CONSOLE manchmal ein Anweisungsfehler angezeigt.
Bitte beziehen Sie sich auf dieses Dokument klicken Sie hier