Google Places API + Angular JS + PHP數據未返回

Question

感謝您的幫助。 我正在探索使用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"
      },

Answer 1

在@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>

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