MarkerClusterer V3没有错误但没有工作

时间:2012-05-28 13:05:39

标签: google-maps google-maps-api-3

好的,所以我开发了以下代码,将Google Maps与Marker Clusterer一起使用。 我在网站上使用了这个例子并稍微修改了它以获取我的json数据。 我的问题是,我没有得到任何错误,但它也没有工作。 我在这里做错了什么?

由于

<head>
    <style type="text/css">
        body {
            margin: 0;
            padding: 10px 20px 20px;
            font-family: Arial;
            font-size: 16px;
        }

        #map-container {
            padding: 6px;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc #ccc #999 #ccc;
            -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
            -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
            box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
            width: 600px;
        }

        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/" +
        "svn/trunk/markerclusterer/src/markerclusterer.js">
    </script>

    <script type="text/javascript">
        var data = {
            "users": [ 
                { "latitude":"48.4048403957642",
                    "longitude":"2.68452644348145" },
                { "latitude":"48.4050236871384",
                    "longitude":"2.68512690051361"},
                { "latitude":"48.4048403957642",
                    "longitude":"2.68452644348145"},
                { "latitude":"48.7570941168018",
                    "longitude":"2.16670989990234"},
                { "latitude":"48.404922961092",
                    "longitude":"2.70020564018949"},
                { "latitude":"48.8739279353421",
                    "longitude":"2.32875823974609"},
                { "latitude":"48.4048403957642",
                    "longitude":"2.68452644348145"},
                { "latitude":"41.0349860434783",
                    "longitude":"28.9774059609177"}
            ]
        };

        function initialize() {
            var center =
                new google.maps.LatLng(48.404840395764175,
                    2.6845264434814453);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 3,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var markers = [];
            for (var i = 0; i < data.length; i++) {
                var location = data.users[i];
                var latLng =
                    new google.maps.LatLng(location.latitude,
                        location.longitude);
                var marker = new google.maps.Marker({ position: latLng });
                markers.push(marker);
            }

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

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>  
</head>
<body>
    <div id="map-container"><div id="map"></div></div>

1 个答案:

答案 0 :(得分:0)

没有添加标记,因为

for (var i = 0; i < data.length; i++) {

应该是

for (var i = 0; i < data.users.length; i++) {