时间戳

首页 > 解决方案 > Google Maps API 循环信息窗口

javascript - Google Maps API 循环信息窗口

问题描述

我无法读取 json 并将其显示在 infoWindow 上。发生的情况是您只读取对象列表中的最后一个产品。我希望您阅读列表中的所有对象（产品）。

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

编码 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
                    }
                ]
            }
        ]
    }

]

标签： javascriptgoogle-maps

解决方案

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

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

现有代码：

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

概念证明小提琴

带有信息窗口的结果地图的屏幕截图

代码片段：

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 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);
      });
    }
    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
        }
      ]
    }]
  }

]
/* 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;
}
<!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>
    <div id="map"></div>
  </body>
</html>

推荐阅读