如何获取 API 的 JSON 结果并在地图上绘制 [关闭]答案

【问题标题】：How to take the JSON result of API and plot on a map [closed]如何获取 API 的 JSON 结果并在地图上绘制 [关闭]
【发布时间】：2020-12-10 23:42:27
【问题描述】：

我有一个工作示例，说明如何控制台记录从外部 API 返回的 JSON 数据。我还有一个工作示例，说明如何将地理编码数据绘制为谷歌地图上的标记。我尝试将它们组合在下面的代码示例中（它非常糟糕）。

我不能做的是让两者一起工作，即调用 API 并传递地理编码数据以绘制在地图上。这是我调用 API、加载 Google 地图和控制台记录地理编码数据的代码示例（我已经删除了 Google 密钥[所以请插入您自己的密钥进行测试]，但留下了 RapidAPI 密钥）：

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"  />
  <title>Javascript Calling APIs</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=ENTER_GOOGLE_KEY_HERE&callback=initMap&libraries=&v=weekly" defer></script>
  <style type="text/css">
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    #map {
      height: 100%;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <h1>Test</h1>
  <div id="map"></div>
  <p id="demo"></p>

  <input type="text" placeholder="Type something..." id="myInput">
  <button type="button" onclick="getInputValue();">Get Value</button>


  <script>
  function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
}

var myHeaders = new Headers();
myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  async function getTown() {
    const response = await fetch(api_url + '/' + town, requestOptions);
    const data = await response.json();
    console.log(data);
    let la = data[2].Geocode_Latitude;
    let lo = data[2].Geocode_Longitude;
    let pot = {lat: la, lng: lo};
        console.log(pot);
  }

  getTown();

      let map;

      function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: 53.4808,
            lng: -2.2426
          },
          zoom: 7,
        });

  addMarker(pot);

  //add marker function
  function addMarker(coords){
    var marker = new google.maps.Marker({
    position:coords,
    map:map,
    icon:'pin.png'
    });
  }
  };

如何在地图上绘制城镇搜索的结果？从 API 返回中获取 lat/lng 并将它们绘制为标记。以下是 JSON 响应的示例：

AddressLine2: "Hallgate Lane"
AddressLine3: "Stalmine"
BusinessName: "MCCOLLS"
Geocode_Latitude: 53.901518
Geocode_Longitude: -2.953877
PostCode: "FY6 0LA"
RatingValue: 5
_id: "5fc96b3a9c728ca91c564485"

【问题讨论】：

什么map？你想要google.maps.Marker吗？ Google Example for adding a marker to a map，尽管相关问题：Google Maps JS API v3 - Simple Multiple Marker Example 可能会让您走得更远。
是的，谷歌地图。我可以在谷歌地图上绘制标记。我只是无法将 API 中的纬度/经度绘制到地图上。我可以 console.log 来自 API 的纬度/经度，但我无法将经度/经度结果从 API 传递给将绘制标记的函数
能否提供服务返回的JSON格式样本（可以是测试数据）？以及您创建地图的代码？最好以您尝试显示标记的方式（即演示问题的minimal reproducible example）。您当前在问题中的代码显示了如何查询 API，但由于密钥无效且不显示地图，因此无法正常工作。
嗨，我添加了我的代码，显示了我尝试将 API 调用与 Google 地图图相结合。它非常糟糕，我正在努力解决如何克服具有全局作用域的函数的局部作用域（因为我是新手）。我也会发布测试 JSON 返回数据。

标签： javascript api google-maps

【解决方案1】：

要根据 API 的响应在地图上放置标记，请将此代码添加到响应的处理中：

let pot = { // existing code
  lat: la,
  lng: lo
};
let marker = new google.maps.Marker({
  position: pot,
  map: map
})

但是，您还需要重新排列代码以在 getInputValue 函数运行时发出请求（当前它在创建地图之前运行，具有 <input> 字段的初始值（在发布的代码中）是空的）。

类似这样的：

function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  function getTown() {
    const response = await fetch(api_url + '/' + town, requestOptions);
    const data = await response.json();
    console.log(data);
    let la = data[0].Geocode_Latitude;
    let lo = data[0].Geocode_Longitude;
    let pot = {
      lat: la,
      lng: lo
    };
    let marker = new google.maps.Marker({
      position: pot,
      map: map
    })
    console.log(pot);
  }

  getTown();

}

proof of concept fiddle

代码 sn-p：

function getInputValue() {
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");

  var town = document.getElementById("myInput").value;

  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };
  var myHeaders = new Headers();
  myHeaders.append("x-rapidapi-key", "169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7");
  const api_url = 'https://wyre-data.p.rapidapi.com/restaurants/town'
  var town = document.getElementById("myInput").value;
  var requestOptions = {
    method: 'GET',
    headers: myHeaders,
    redirect: 'follow'
  };

  function getTown() {
    // use provided response instead of response from server
    //  const response = await fetch(api_url + '/' + town, requestOptions);
    //  const data = await response.json();
    const data = [{
      AddressLine2: "Hallgate Lane",
      AddressLine3: "Stalmine",
      BusinessName: "MCCOLLS",
      Geocode_Latitude: 53.901518,
      Geocode_Longitude: -2.953877,
      PostCode: "FY6 0LA",
      RatingValue: 5,
      _id: "5fc96b3a9c728ca91c564485",
    }];
    console.log(data);
    let la = data[0].Geocode_Latitude;
    let lo = data[0].Geocode_Longitude;
    let pot = {
      lat: la,
      lng: lo
    };
    let marker = new google.maps.Marker({
      position: pot,
      map: map
    })
    console.log(pot);
  }

  getTown();

}


let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 53.4808,
      lng: -2.2426
    },
    zoom: 7,
  });

  addMarker(pot);

  //add marker function
  function addMarker(coords) {
    var marker = new google.maps.Marker({
      position: coords,
      map: map,
      icon: 'pin.png'
    });
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 60%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
      <h1>Test</h1>
  <div id="map"></div>
  <p id="demo"></p>

  <input type="text" placeholder="Type something..." id="myInput">
  <button type="button" onclick="getInputValue();">Get Value</button>
  </body>
</html>

【讨论】：