感谢您之前的帮助。我正在探索使用 Google Places 网络服务 API 中的数据构建应用程序。我正在使用 AngularJS、PHP 和 HTML。截至目前，我在使 API 结果可访问 Angular 和后续 HTMl 页面时遇到问题。任何帮助将非常感激。
//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>
//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){
$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>
关于javascript - Google Places API + Angular JS + PHP 数据未返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47928213/