[英]Google Places API + Angular JS + PHP data not returning
感谢您的帮助。 我正在探索使用Google Places网络服务API中的数据构建应用程序。 我正在使用AngularJS,PHP和HTML。 到目前为止,我遇到了使API结果可访问角度页面和后续HTM1页面的问题。 任何帮助将非常感激。
// HTML
<!doctype html>
<html ng-app="myApp">
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Raleway" rel="stylesheet">
<style>
</style>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
</head>
<body>
<div id="myDiv" ng-controller="getPlaces">
{{name}}
</div>
<script src="\myProject\angularJS.js"></script>
</body>
</html>
//角度
var myApp = angular.module('myApp', []);
myApp.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
myApp.controller('getPlaces', function($scope, $http) {
$http.get("/myProject/getListofPlaces.php")
.then(function(data){
$scope.placesResults = data.data;
});
});
// PHP
<?php
$handler = curl_init();
$header = array();
$header[] = 'Content-length: 0';
$header[] = 'Content-type: application/json';
curl_setopt_array(
$handler,
array(
CURLOPT_HTTPHEADER=> $header,
CURLOPT_URL => 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&type=restaurant&keyword=cruise&key=MY_API_KEY',
CURLOPT_RETURNTRANSFER => 1,
)
);
$response = curl_exec($handler);
curl_close($handler);
$placesResults = json_decode($response, true);
echo $placeResults;
?>
结果或JSON看起来像这样-我想获取显示在HTML中的地点的名称。
{
"html_attributions" : [],
"results" : [
{
"geometry" : {
"location" : {
"lat" : -33.86755700000001,
"lng" : 151.201527
},
"viewport" : {
"northeast" : {
"lat" : -33.8662140697085,
"lng" : 151.2028105302915
},
"southwest" : {
"lat" : -33.8689120302915,
"lng" : 151.2001125697085
}
}
},
"icon" : "https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png",
"id" : "ce4ffe228ab7ad49bb050defe68b3d28cc879c4a",
"name" : "Sydney Showboats",
"opening_hours" : {
"open_now" : false,
"weekday_text" : []
},
"photos" : [
{
"height" : 1152,
"html_attributions" : [
"\u003ca href=\"https://maps.google.com/maps/contrib/107415973755376511005/photos\"\u003eSydney Showboats\u003c/a\u003e"
],
"photo_reference" : "CmRaAAAAXYq_pvvJuBivOnyfIFgtcidjSshkWpJ-nTC3anGmHSM2DaYiSsgrNXwCXlLfYPC01g8bDjitKqJ8oNPjIRcEp3WeDPBQDcL3wkrodbGZ7cViwV6O_JHB_A4uOr-AOWDkEhCwS0PplxpSuMcISfBISOpiGhQNiv2N8ljsWfU2iQ9mP-8J46HbRQ",
"width" : 2048
}
],
"place_id" : "ChIJjRuIiTiuEmsRCHhYnrWiSok",
"rating" : 3.8,
"reference" : "CmRSAAAA6kANEdwze-e8q3GNEpbYX-Rp7Ukh18IXTUYviRP4JOW35rOULIi5rZWvdDrOJ9FaI0gcQW6Bf8YYVcoDbukWC1gXMcjldzi1FShcMJUK4Z_Wzc_SCJ-iTCZ7fVtvH4DxEhB6-HlZxiO3dBygcLUxCVVcGhQ8SRKBovx_rpWcCU7xEVVvn6l7UA",
"scope" : "GOOGLE",
"types" : [
"travel_agency",
"restaurant",
"food",
"point_of_interest",
"establishment"
],
"vicinity" : "32 The Promenade, Sydney"
},
在@alistaircol的一点帮助后找到了答案,我基本上需要指出我的范围在placeResults对象中的某个级别,然后我需要在HTML中添加对placeResults的引用
//更新了Angular
var myApp = angular.module('myApp', []);
myApp.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
myApp.controller('getPlaces', function($scope, $http) {
$http.get("/myProject/getListofPlaces.php")
.then(function(data){
//Edit #1
$scope.placesResults = data.data.results;
});
});
//更新的HTML
<!doctype html>
<html ng-app="myApp">
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Raleway" rel="stylesheet">
<style>
</style>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
</head>
<body>
<div id="myDiv" ng-controller="getPlaces">
//Edit #2
{{placesResults[0].name}}
</div>
<script src="\myProject\angularJS.js"></script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.