Javascript 如何正确解析包含位置信息的JSON字符串数据以创建Google Maps标记

我从JSON响应中获取纬度和经度作为字符串。我正在解析响应，提取它们，然后将它们存储在一个数组中。然后，我使用该数组使用谷歌地图在地图上填充标记

我的问题是，当我硬编码位置数组中的值时，例如：

var位置=[[“快乐餐厅”，37.328255，-121.883693]
标记已成功填充。但是当我使用locations.push（[f.restaurant\u name，parseFloat（Number（f.address.latitude）），parseFloat（Number（f.address.longitude）））标记未在地图上填充。
硬编码的值工作得很好，但不知何故，它无法使用从JSON解析响应填充的数组填充映射，该响应具有相同的数据。我尝试使用
parseFloat
和
Number
方法。还尝试了
toString
。似乎什么都不管用。我错过了什么

我的代码：

map.js：

var locations = [];
$.getJSON("http://localhost:63342/295%20Project/api/response.json?",
  function(data) {
    $.each(data, function(i, f) {
      //Log prints accurate data
      console.log(f.restaurant_name + " " + parseFloat(Number(f.address.latitude)) + " " + parseFloat(Number(f.address.longitude)));

      // tried using Number() parseFloat() and parseFloat(Number()) without success
      locations.push(f.restaurant_name, parseFloat(Number(f.address.latitude)), parseFloat(Number(f.address.longitude)));
    });
  });
//create the map
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 10,
  center: new google.maps.LatLng(37.328255, -121.883693),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker;
var i;
//populate the markers on map (works with hardocded values in the locations array)
for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, "click", (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
      //redirect markers to restaurant_detail.html
    }
  })(marker, i));
}

html:

您正在访问
位置[i][1]
就好像
位置[i]
是一个数组，但您当前正在
将单个原语推送到
位置。尝试将数组推送到
位置
：

locations.push([f.restaurant_name, f.address.latitude, f.address.longitude]);

此外，与处理
var
的函数作用域问题相比，您可能会发现使用
let
编写代码要容易得多，因为它具有块作用域，更容易处理。或者，更好的方法是使用
forEach
直接迭代

另一个问题是，您需要确保在调用localhost之后而不是之前填充映射。按原样，创建映射的代码会在发出请求后立即运行，而无需等待响应。相反，仅在响应返回后创建映射：

fetch('http://localhost:63342/295%20Project/api/response.json?')
  .then((data) => data.json())
  .then((data) => {
  const locations = data.map(({ restaurant_name, address: { latitude, longitude }}) => (
    [restaurant_name, latitude, longitude]
  ));
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: new google.maps.LatLng(37.328255, -121.883693),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  const infowindow = new google.maps.InfoWindow();
  locations.forEach(([name, lat, lng]) => {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });
    google.maps.event.addListener(marker, "click", () => {
      infowindow.setContent(name);
      infowindow.open(map, marker);
    });
  });
});

尝试对字符串化的
位置进行
记录
并查看其与直接定义时的区别。（还有，为什么
parseFloat（Number（
？）它一点也不不同。日志显示的正是我想要的。这是有趣的部分。我尝试了
parseFloat
，
Number
和
parseFloat（Number（？）
，所有3个都不工作您的后端似乎已损坏-JSON格式不正确，因此解析它将引发错误。抱歉，我上面添加的响应缺少“}”括号，在问题中添加。JSON显示为有效，我使用jsonlint.com检查了您的建议，但仍然没有填充标记。请参见编辑-您没有在创建地图之前等待响应返回，因此创建地图时
位置
为空。没有等待对com的响应问题出在创建地图之前。非常感谢！：）
locations.push([f.restaurant_name, f.address.latitude, f.address.longitude]);

fetch('http://localhost:63342/295%20Project/api/response.json?')
  .then((data) => data.json())
  .then((data) => {
  const locations = data.map(({ restaurant_name, address: { latitude, longitude }}) => (
    [restaurant_name, latitude, longitude]
  ));
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: new google.maps.LatLng(37.328255, -121.883693),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  const infowindow = new google.maps.InfoWindow();
  locations.forEach(([name, lat, lng]) => {
    const marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map
    });
    google.maps.event.addListener(marker, "click", () => {
      infowindow.setContent(name);
      infowindow.open(map, marker);
    });
  });
});