Javascript 如何获取API的JSON结果并在地图上绘图

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

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

---

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

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

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

但是，当

getInputValue

函数运行时，您还需要重新排列代码以发出请求（当前它在创建映射之前运行，

字段的初始值为空）

大概是这样的：

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();

}

代码片段：

函数getInputValue（）{ var myHeaders=newheaders（）； myHeaders.append（“x-rapidapi-key”，“169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7”）； var town=document.getElementById（“myInput”）.value； var请求选项={ 方法：“GET”， 标题：myHeaders， 重定向：“跟随” }; var myHeaders=newheaders（）； myHeaders.append（“x-rapidapi-key”，“169034d4a5msha6f68db3ab64e43p12abf2jsnabff656340a7”）； const api_url='1〕https://wyre-data.p.rapidapi.com/restaurants/town' var town=document.getElementById（“myInput”）.value； var请求选项={ 方法：“GET”， 标题：myHeaders， 重定向：“跟随” }; 函数getTown（）{ //使用提供的响应而不是来自服务器的响应 //const response=wait fetch（api_url+'/'+town，requestOptions）； //const data=wait response.json（）； 常数数据=[{ 地址行2：“门廊巷”， 地址行3：“斯大林”， 商业名称：“MCCOLLS”， 地理编码纬度：53.901518， 地理代码经度：-2.953877， 邮政编码：“FY6 0LA”， 额定值：5， _id:“5fc96b3a9c728ca91c564485”， }]; 控制台日志（数据）； 设la=数据[0]。地理代码_纬度； 设lo=数据[0]。地理代码_经度； 让壶={ 拉特：洛杉矶， 液化天然气：lo }; 让marker=new google.maps.marker({ 位置：锅， 地图：地图 }) 控制台日志（pot）； } getTown（）； } 让地图； 函数initMap（）{ map=new google.maps.map（document.getElementById（“map”）{ 中心：{ 拉脱维亚：53.4808， 液化天然气：-2.2426 }, 缩放：7， }); 添加标记（罐）； //添加标记函数 函数addMarker（coords）{ var marker=new google.maps.marker({ 职位：coords， 地图：地图， 图标：“pin.png” }); } }

/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：60%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

简单标记
测验

获得价值

什么

map

？你想要一个

google.maps.Marker

？尽管相关的问题：可能会让你更进一步。是的，谷歌地图。我可以在谷歌地图上绘制标记。我只是无法将API中的lat/lngs绘制到地图上。我可以控制台。从API中记录lat/lngs，但我无法将API中的lat/lngs结果传递给函数n这将绘制标记。您可以提供服务返回的JSON格式示例（可以是测试数据）和创建地图的代码吗？最好是以您试图显示标记的方式（即，演示问题的代码）。您当前问题中的代码显示了如何查询API，但不起作用，因为密钥无效，并且不显示映射。您好，我添加了我的代码，显示了我试图将API调用与Google map plot相结合的尝试。这非常糟糕，我正在努力克服函数的局部范围与全局范围之间的矛盾（因为我是新来的）。我还将对JSON返回数据进行后期测试。

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();

}