for循环中的Google Maps API，如何合并信息窗口？

Question

所以我在一页上有 4 张地图。我让他们都通过 for 循环工作。现在我需要添加标记/ Infowindows 任何想法将其添加到循环中的最佳方式，谢谢！

// array of lat and lng locations
let locations = [
    {
      lat:-33.91722,
      lng:151.23064
    },
    {
    lat:22.3193,
    lng:114.1694
    },
    {
    lat:22.3255,
    lng:114.3532
    },
    {
    lat:23.3532,
    lng:115.1234
    }
];
let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids

window.addEventListener('load', 
function() {
for (i = 0; i < elements.length; i++) {
    initMap(locations[i], elements[i]);
    console.log(elements[i]);
    console.log(locations[i])}
}, false);

function initMap(location, element) {
    console.log(location)
    console.log(element)
    map = new google.maps.Map(document.getElementById(element), {zoom:4, center: location});
}

Answer 1

一种选择是将标记的信息添加到您的数组中。

（如果你想在每张地图上使用相同的标记，你可以简化数组或者为标记设置一个单独的数组）

let locations = [{
  lat: -33.91722,
  lng: 151.23064,
  markers: [{
      lat: -33.91722,
      lng: 151.23064,
      info: "this is a marker at -33.91722,151.23064"
    }, {
      lat: -33.8722,
      lng: 151.03064,
      info: "this is a marker at -33.8722,151.03064"
    },
    {
      lat: -33.5722,
      lng: 151.03064,
      info: "this is a marker at -33.5722,151.03064"
    }
  ]
},
{
  lat: 22.3193,
  lng: 114.1694,
  markers: [{
    lat: 22.3193,
    lng: 114.1694,
    info: "this is a marker at 22.3193,114.1694"
  }]
},
{
  lat: 22.3255,
  lng: 114.3532
},
{
  lat: 23.3532,
  lng: 115.1234
}
];

然后在您的 initMap 函数中，将这些标记添加到地图中：

  function initMap(location, element, infowindow) {
    console.log(location)
    console.log(element)
    map = new google.maps.Map(document.getElementById(element), {
      zoom: 4,
      center: location
    });
    if (location.markers) {
      for (var i = 0; i < location.markers.length; i++) {
        createMarker(location.markers[i], map, infowindow);
      }
    }
  }

createMarker 函数：

  function createMarker(location, map, infowindow) {
    let marker = new google.maps.Marker({
      position: location,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infowindow.setContent(location.info);
      infowindow.open(map, marker);
    })
  }

proof of concept fiddle

代码 sn-p：

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initialize() {
  // array of lat and lng locations
  let locations = [{
      lat: -33.91722,
      lng: 151.23064,
      markers: [{
          lat: -33.91722,
          lng: 151.23064,
          info: "this is a marker at -33.91722,151.23064"
        }, {
          lat: -33.8722,
          lng: 151.03064,
          info: "this is a marker at -33.8722,151.03064"
        },
        {
          lat: -33.5722,
          lng: 151.03064,
          info: "this is a marker at -33.5722,151.03064"
        }
      ]
    },
    {
      lat: 22.3193,
      lng: 114.1694,
      markers: [{
        lat: 22.3193,
        lng: 114.1694,
        info: "this is a marker at 22.3193,114.1694"
      }]
    },
    {
      lat: 22.3255,
      lng: 114.3532
    },
    {
      lat: 23.3532,
      lng: 115.1234
    }
  ];
  let elements = ['maps', 'map-rec-one', 'map-rec-two', 'map-rec-three']; // array of html element ids

  window.addEventListener('load',
    function() {
      for (i = 0; i < elements.length; i++) {
        initMap(locations[i], elements[i], new google.maps.InfoWindow());
        console.log(elements[i]);
        console.log(locations[i])
      }
    }, false);

  function initMap(location, element, infowindow) {
    console.log(location)
    console.log(element)
    map = new google.maps.Map(document.getElementById(element), {
      zoom: 4,
      center: location
    });
    if (location.markers) {
      for (var i = 0; i < location.markers.length; i++) {
        createMarker(location.markers[i], map, infowindow);
      }
    }
  }

  function createMarker(location, map, infowindow) {
    let marker = new google.maps.Marker({
      position: location,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      infowindow.setContent(location.info);
      infowindow.open(map, marker);
    })
  }
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#maps,
#map-rec-one,
#map-rec-two,
#map-rec-three {
  height: 100%;
  width: 25%;
  float: right;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Complex Marker Icons</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=initialize&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="maps"></div>
  <div id="map-rec-one"></div>
  <div id="map-rec-two"></div>
  <div id="map-rec-three"></div>
</body>

</html>