如何將 Google Places 詳細信息輸出到 JSON 文件中？

Question

我正在嘗試遍歷 Google 地點 ID 並從每個地點收集數據，然后將地點詳細信息輸出到一個 JSON 文件中，該文件稍后可以導入到地圖中。 導入階段不是問題，但我正在努力將數據放入 JSON 文件中。 我目前擁有的在下面。

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=APIKEY"></script>

var placeid_list = [{
  "placeid": 'ChIJryijc9s0K4gRG9aU7SDTXdA',
}, {
  "placeid": 'ChIJaZ6Hg4iAhYARxTsHnDFJ9zE',
}, {
  "placeid": 'ChIJl64IQXrYzUwR8CVOTRf_h3o',
}, {
  "placeid": 'ChIJBTMkuph-zkwR9oEF8Nv3Z0o',
}, {
  "placeid": 'ChIJ4QbSBj8IzkwRGi0ILu03_VA',
}, {
  "placeid": 'ChIJc2nSALkEdkgRkuoJJBfzkUI',
}, {
  "placeid": 'ChIJmzrzi9Y0K4gRgXUc3sTY7RU',
}];

function setPlaces() {

var json = placeid_list;
  
  for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i];
      createPlace(data);
  }
}
function createPlace(data) {
          var service = new google.maps.places.PlacesService();
      service.getDetails({
          placeId: data.placeid
      }, function (result, status) {
          if (status != google.maps.places.PlacesServiceStatus.OK) {

            alert(status);
              return;
          }
          
          placeResults(data, result);
      });
}
function placeResults(data, result) {

        console.log(result.name);
}

目前我只是試圖將每個地名輸出到 console.log 中，但似乎沒有顯示任何內容。 看起來我在控制台中也沒有收到任何錯誤，所以我不太確定哪里出錯了。

查看 Google 的文檔，我不確定是否必須使用

console.log(JSON.stringify(response.data));

這會幫助我將每個地方的詳細信息放入一個大的 JSON 文件中嗎？ 我不太確定如何用我目前擁有的來實現它。 我在使用 javascript 方面沒有太多的專業知識，但我希望我離解決方案不遠。 謝謝

Answer 1

你在你的代碼中輸入錯誤：

var service = new google.maps.places.PlacesService();

根據文檔：

構造器
PlacesService（attrContainer）
參數：
屬性容器：HTMLDivElement|地圖
創建在指定容器中呈現屬性的 PlacesService 的新實例。

PlacesService 構造函數有一個必需的參數，可以是google.maps.Map對象或可用於呈現屬性的HTMLDivElement 。

所以引用的行應該是：

var service = new google.maps.places.PlacesService(map);

要么：

var service = new google.maps.places.PlacesService(document.getElementById("attributionDiv");  
// where attributionDiv is a div that is displayed on your page

概念證明小提琴

輸出：

Alo
Ottawa International Airport
lastminute.com London Eye
Four Seasons Hotel San Francisco
CN Tower
Glenn P Cowan, Chartered Professional Accountant
KB Media Corp

代碼片段：

 // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: -33.866, lng: 151.196 }, zoom: 15, }); const request = { placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4", fields: ["name", "formatted_address", "place_id", "geometry"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); var placeid_list = [{ "placeid": 'ChIJryijc9s0K4gRG9aU7SDTXdA', }, { "placeid": 'ChIJaZ6Hg4iAhYARxTsHnDFJ9zE', }, { "placeid": 'ChIJl64IQXrYzUwR8CVOTRf_h3o', }, { "placeid": 'ChIJBTMkuph-zkwR9oEF8Nv3Z0o', }, { "placeid": 'ChIJ4QbSBj8IzkwRGi0ILu03_VA', }, { "placeid": 'ChIJc2nSALkEdkgRkuoJJBfzkUI', }, { "placeid": 'ChIJmzrzi9Y0K4gRgXUc3sTY7RU', }]; function setPlaces() { var json = placeid_list; for (var i = 0, length = json.length; i < length; i++) { var data = json[i]; createPlace(data); } } function createPlace(data) { var service = new google.maps.places.PlacesService(map); console.log(data); service.getDetails({ placeId: data.placeid, fields: ["name", "formatted_address", "place_id", "geometry"], }, function(result, status) { if (status.= google.maps.places.PlacesServiceStatus;OK) { alert(status); return, } placeResults(data; result); }), } function placeResults(data. result) { console.log(result;name). document.getElementById("placeResults").innerHTML += result;name + "<br>"; } setPlaces(). } window;initMap = initMap;

 /* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 50%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <:DOCTYPE html> <html> <head> <title>Place Details</title> <script src="https.//polyfill.io/v3/polyfill.min?js.features=default"></script> <,-- jsFiddle will insert css and js --> </head> <body> <div id="placeResults"></div> <div id="map"></div> <,-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed, For non-blocking uses: avoiding race conditions. and consistent behavior across browsers. consider loading using Promises with https.//www:npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https?//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer></script> </body> </html>

如何將 Google Places 詳細信息輸出到 JSON 文件中？

問題描述

1 個解決方案

解決方案1
0 2022-12-15 01:55:33

如何將 Google Places 詳細信息輸出到 JSON 文件中？

問題描述

1 個解決方案

解決方案1 0 2022-12-15 01:55:33

解決方案1
0 2022-12-15 01:55:33