Google Places API + Angular JS + PHP数据未返回

Question

Thanks for the help up front. 感谢您的帮助。 I am exploring building an app using data from the Google Places web services API. 我正在探索使用Google Places网络服务API中的数据构建应用程序。 I am using AngularJS, PHP and HTML. 我正在使用AngularJS，PHP和HTML。 As of now I am having an issue making the API results accessible to angular and subsequent HTMl page. 到目前为止，我遇到了使API结果可访问角度页面和后续HTM1页面的问题。 Any help would be much appreciated. 任何帮助将非常感激。

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

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

?>

The results or the JSON looks something like this - I'd like to get the name of the place to display in my HTML. 结果或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"
      },

Answer 1

Found the answer after a bit of help from @alistaircol I basically needed point my scope go down a level in the placeResults object and then i needed to add reference to the placeResults in my HTML 在@alistaircol的一点帮助后找到了答案，我基本上需要指出我的范围在placeResults对象中的某个级别，然后我需要在HTML中添加对placeResults的引用

//updated Angular //更新了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;
   });

});

//updated 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">
             //Edit #2
            {{placesResults[0].name}}
        </div>
        <script src="\myProject\angularJS.js"></script>
    </body>
</html>

Google Places API + Angular JS + PHP数据未返回

问题描述

1 个解决方案

解决方案1
0 2017-12-21 17:21:26

Google Places API + Angular JS + PHP数据未返回

问题描述

1 个解决方案

解决方案1 0 2017-12-21 17:21:26

解决方案1
0 2017-12-21 17:21:26