试图让 marker var 脱离 foreach 循环以使 markerCluster 工作，最简单的方法是什么？

Question

我正在尝试将 MarkerClusters 添加到我的地图，但是我的标记变量在一个函数中，该函数带有用于检索 Instagram API 数据的 foreach 循环，让 MarkerClusters 工作的最佳方法是什么？

我尝试将 initMap 函数包装在 setMarkers 函数周围，将 markerCluster 变量放在 setMarkers 函数和 foreach 循环中，但它只是一直显示标记（在我的例子中是图片）

<script>
    let coords = document.getElementById("places").innerHTML;
    let parts = coords.split(",");

    let finalResult = []
    while (parts.length) {
        let newArr = parts.splice(0, 3);
        finalResult.push(newArr);
    }

    console.log(finalResult)


    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: {
                lat: 52.9,
                lng: 101.2
            }
        });
        setMarkers(map);
    }

    function setMarkers(map) {

        finalResult.forEach((place) => {

            var image = {
                url: place[0],
                scaledSize: new google.maps.Size(64, 64),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(32, 32)
            };

            var shape = {
                coords: [1, 1, 1, 20, 18, 20, 18, 1],
                type: 'poly'
            };

            var myLatlng = new google.maps.LatLng(place[1], place[2]);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: image,
                shape: shape
            });

        })
        var markerCluster = new MarkerClusterer(map, marker,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
    }

</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>

Answer 1

一种选择是在 setMarkers 函数中创建 MarkerClusterer，然后在使用 .addMarker 方法创建它们时分别向其中添加标记。

function setMarkers(map) {
  var markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  finalResult.forEach((place) => {
    var image = {
      url: place[0],
    };

    var myLatlng = new google.maps.LatLng(place[1], place[2]);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image,
    });
    markerCluster.addMarker(marker);
  });

proof of concept fiddle

代码片段：

let coords = document.getElementById("places").innerHTML;
let parts = coords.split(",");

let finalResult = []
while (parts.length) {
  let newArr = parts.splice(0, 3);
  finalResult.push(newArr);
}

console.log(finalResult)


function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: -38,
      lng: 150
    }
  });
  setMarkers(map);
}

function setMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  var markerCluster = new MarkerClusterer(map, [], {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  finalResult.forEach((place) => {
    var image = {
      url: place[0],
    };

    var myLatlng = new google.maps.LatLng(place[1], place[2]);
    bounds.extend(myLatlng);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      icon: image,
    });
    markerCluster.addMarker(marker);
    map.fitBounds(bounds);
  });
}

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

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="places" style="display:none">https://maps.google.com/mapfiles/ms/micons/blue.png,-31.563910,147.154312, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.718234,150.363181, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.727111,150.371124, https://maps.google.com/mapfiles/ms/micons/blue.png,-33.848588,151.209834,https://maps.google.com/mapfiles/ms/micons/blue.png,-33.851702,151.216968,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-34.671264,150.863657, https://maps.google.com/mapfiles/ms/micons/blue.png,-35.304724,148.662905, https://maps.google.com/mapfiles/ms/micons/blue.png,-36.817685,175.699196,https://maps.google.com/mapfiles/ms/micons/blue.png,-36.828611,175.790222,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-37.750000,145.116667, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.759859,145.128708, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.765015,145.133858,https://maps.google.com/mapfiles/ms/micons/blue.png,-37.770104,145.143299,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-37.773700,145.145187, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.774785,145.137978, https://maps.google.com/mapfiles/ms/micons/blue.png,-37.819616,144.968119, https://maps.google.com/mapfiles/ms/micons/blue.png,-38.330766,144.695692,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-39.927193,175.053218, https://maps.google.com/mapfiles/ms/micons/blue.png,-41.330162,174.865694, https://maps.google.com/mapfiles/ms/micons/blue.png,-42.734358,147.439506, https://maps.google.com/mapfiles/ms/micons/blue.png,-42.734358,147.501315,
  https://maps.google.com/mapfiles/ms/micons/blue.png,-42.735258,147.438000, https://maps.google.com/mapfiles/ms/micons/blue.png,-43.999792,170.463352,
</div>

试图让 marker var 脱离 foreach 循环以使 markerCluster 工作，最简单的方法是什么？

Trying to get the marker var out of the foreach loop for markerCluster to work, what is the easiest way of doing this?

google-maps

google-maps-markers