为什么我的自定义Google地图中没有看到任何标记群集?

时间:2014-07-03 09:37:21

标签: google-maps

我真的希望你能帮到我,因为我整天都把头发拉出来! 我们正在开发一个房地产代理网站,作为其中的一部分,我希望为主页开发一个集群地图,该地图将链接到所有房产。

我有地图从我添加的地址中对几个虚拟位置进行地理编码,但是当我添加代码来创建群集时,它似乎不起作用。 我开始认为我没有为此添加足够的位置来点击,但我见过的演示只有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>

如果您可以测试并提供任何帮助或建议,我将非常感激!

提前致谢!

1 个答案:

答案 0 :(得分:1)

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

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