为什么我在自定义 Google 地图中看不到任何标记集群？答案

【问题标题】：Why am I not seeing any marker clusters in my custom Google map?为什么我在自定义 Google 地图中看不到任何标记集群？
【发布时间】：2014-07-03 09:37:21
【问题描述】：

我真的希望你能帮上忙，因为我一整天都在忙着做这个！我们正在开发一个房地产代理网站，作为其中的一部分，我希望为主页开发一个集群地图，该地图将包含指向所有房产的链接。

我已经从我添加的地址中对几个虚拟位置进行了地图地理编码，但是当我添加代码以创建集群时，它似乎无法正常工作。我开始认为我没有添加足够的位置来点击它，但我看到的演示只有 2 个标记。

以下是我目前的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/data.json"></script>
<script type="text/javascript">

    function initialize() {

        var myOptions = {center: new google.maps.LatLng(54, -2), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var addressArray = new Array("3 Ard Na Cluana, Warrenpoint, BT34 3GY","19 Great Georges Street, Warrenpoint","Warrenpoint","BT34 3FS","15 Ard Na Cluana, Warrenpoint, BT34 3GY","10 Carrowmenagh Lane, Maghera","Belfast","49.286955, -123.118479");
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();

        var markers = [];

        for (var i = 0; i < 100; i++) {

            geocoder.geocode( { "address": addressArray[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
                markers.push(marker);
                markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
            }
});
}

        var markerCluster = new MarkerClusterer(map, markers);
        }

</script>

</head>

<body>
<div id="map_canvas" style="width:600px; height: 400px;">&nbsp;</div>
<script type="text/javascript">
initialize();
</script>
</body>
</html>

如果您能测试并提供任何帮助或建议，我将不胜感激！

提前致谢！

【问题讨论】：

标签： google-maps

【解决方案1】：

geocode() 是异步方法，需要一些时间才能完成。 markerCluster 在填充 markers 之前创建。一种选择是在for 循环之前创建markerCluster 并使用

markerCluster.addMarker(marker, true);

在geocode() 方法中。例如：

        var markerCluster = new MarkerClusterer(map, markers);

        for (var i = 0; i < 100; i++) {

            geocoder.geocode( { "address": addressArray[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location});
                markers.push(marker);
                markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);

                markerCluster.addMarker(marker, true);
            }
});
}

        //var markerCluster = new MarkerClusterer(map, markers);
        }

【讨论】：