Javascript 谷歌地图API循环信息窗口

我无法读取json并在infoWindow上显示它。发生的情况是，您只读取对象列表中的最后一个产品。我想让你看看清单上的所有物品（产品）

它应该像这样显示在信息窗口中

• 卖方编号：1
• 卖方名称：卖方1
• 客户名称：客户2
• 产品名称1
• 金额：10
• 产品名称产品2
• 金额：5
• 产品名称3
• 金额：20

代码JavaScript和JSON

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: {
      lat: -25.363,
      lng: -131.044
    }
  });
  const infoWindow = new google.maps.InfoWindow({
    maxwidth: 400 
  });
  setMarkers(map, infoWindow);
}

function setMarkers(map, infoWindow) {
  const image = {
    url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
    size: new google.maps.Size(10, 12),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32)
  }
  //  $.get("file.json", function(data) {
  function processJson(data) {
    var bounds = new google.maps.LatLngBounds();
    var a = data;
    for (var i = 0; i < a.length; i++) {
      var b = a[i].Custommer
      for (var j = 0; j < b.length; j++) {
        var c = b[j].Products
        for (var l = 0; l < c.length; l++) {
          const infoWindowContent = a[i].idSeller +
              a[i].nameSeller +
              b[j].nameCustommer +
              c[l].nameProduct +
              c[l].amount;
          const marker = new google.maps.Marker({
            position: {
              lat: a[i].lat,
              lng: a[i].lng
            },
            map,
            icon: image,
          });
          bounds.extend(marker.getPosition());
          marker.addListener("click", () => {
            infoWindow.setContent(infoWindowContent);
            infoWindow.open(map, marker);
          });
        }
        map.fitBounds(bounds);
      }
    }
  // })
  }
  processJson(jsonData);
}
var jsonData = [
    {
        "idSeller": 1,
        "nameSeller": "Seller 1",
        "lat": -25.363,
        "lng": 131.044,
        "Custommer": [
            {
                "idCustommer": 1,
                "nameCustommer": "Custommer 1",
                "Products": [
                    {
                        "nameProduct": "Product 1",
                        "amount": 10,
                        "price": 2.99
                    },
                    {
                        "nameProduct": "Product 2",
                        "amount": 5,
                        "price": 10.99
                    },
                    {
                        "nameProduct": "Product 3",
                        "amount": 20,
                        "price": 7.99
                    }
                ]
            }
        ]
    },
    {
        "idSeller": 2,
        "nameSeller": "Seller 2",
        "lat": -25.063,
        "lng": 131.045,
        "Custommer": [
            {
                "idCustommer": 2,
                "nameCustommer": "Custommer 2",
                "Products": [
                    {
                        "nameProduct": "Product 1",
                        "amount": 10,
                        "price": 2.99
                    },
                    {
                        "nameProduct": "Product 2",
                        "amount": 5,
                        "price": 10.99
                    },
                    {
                        "nameProduct": "Product 3",
                        "amount": 20,
                        "price": 7.99
                    }
                ]
            }
        ]
    }

]

函数initMap（）{
const map=new google.maps.map（document.getElementById（“map”）{
缩放：10，
中心：{
lat:-25.363，
液化天然气：-131.044
}
});
const infoWindow=new google.maps.infoWindow({
最大宽度：400
});
设置标记（地图、信息窗口）；
}
函数设置标记（映射、信息窗口）{
常量图像={
url:“https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png",
大小：新谷歌地图大小（10,12），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（0,32）
}
//$.get（“file.json”，函数（数据）{
函数processJson（数据）{
var bounds=new google.maps.LatLngBounds（）；
var a=数据；
对于（变量i=0；i{
setContent（infoWindowContent）；
信息窗口。打开（地图、标记）；
});
}
映射边界（bounds）；
}
}
// })
}
processJson（jsonData）；
}
var jsonData=[
{
“idSeller”：1，
“名称卖方”：“卖方1”，
“lat”：-25.363，
“液化天然气”：131.044，
“客户”：[
{
“idcustomer”：1，
“nameCustommer”：“Custommer 1”，
“产品”：[
{
“名称产品”：“产品1”，
“金额”：10，
“价格”：2.99
},
{
“名称产品”：“产品2”，
“金额”：5，
“价格”：10.99
},
{
“名称产品”：“产品3”，
“金额”：20，
“价格”：7.99
}
]
}
]
},
{
“idSeller”：2，
“名称卖方”：“2号卖方”，
“lat”：-25.063，
“液化天然气”：131.045，
“客户”：[
{
“idcustomer”：2，
“nameCustommer”：“Custommer 2”，
“产品”：[
{
“名称产品”：“产品1”，
“金额”：10，
“价格”：2.99
},
{
“名称产品”：“产品2”，
“金额”：5，
“价格”：10.99
},
{
“名称产品”：“产品3”，
“金额”：20，
“价格”：7.99
}
]
}
]
}
]

在循环中，您将覆盖信息窗口中的产品信息，留下列表中显示的最后一个产品

最好用更有意义的名称来命名变量

现有代码：

    for (var i = 0; i < a.length; i++) {
      var b = a[i].Custommer                 // b == customer
      for (var j = 0; j < b.length; j++) {
        var c = b[j].Products                // c == products
        for (var l = 0; l < c.length; l++) {
          const infoWindowContent = a[i].idSeller +
              a[i].nameSeller +
              b[j].nameCustommer +
              c[l].nameProduct +
              c[l].amount;
          const marker = new google.maps.Marker({
            position: {
              lat: a[i].lat,
              lng: a[i].lng
            },
            map,
            icon: image,
          });
          bounds.extend(marker.getPosition());
          marker.addListener("click", () => {
            infoWindow.setContent(infoWindowContent);
            infoWindow.open(map, marker);
          });
        }
        map.fitBounds(bounds);
      }
    }

    var sellers = data;
    for (var i = 0; i < sellers.length; i++) {
      let infoWindowContent = sellers[i].idSeller +
          sellers[i].nameSeller+"<br>";
      var customers = sellers[i].Custommer
      for (var j = 0; j < customers.length; j++) {
        var products = customers[j].Products
        infoWindowContent += customers[j].nameCustommer+"<br>";
        for (var l = 0; l < products.length; l++) {
          infoWindowContent += products[l].nameProduct +
            products[l].amount+"<br>";
        }
      }
      const marker = new google.maps.Marker({
        position: {
          lat: sellers[i].lat,
          lng: sellers[i].lng
        },
        map,
        icon: image,
      });
      bounds.extend(marker.getPosition());
      marker.addListener("click", () => {
        infoWindow.setContent(infoWindowContent);
        infoWindow.open(map, marker);
      });
    }

简单标记

正如我在本问题最后一个版本的评论中所说，您正在覆盖每个产品的信息窗口内容，只留下最后一个产品的信息。解决这个问题，它会做你想做的。@geocodezip我不知道怎么做，我有点初学者。你能举个例子吗？