Google API v3 MarkerCluster和AJAX无法显示分组标记

我已经查看了链接的答案，但尽管我认为我在逻辑上遵循了它的流程，但我无法将其应用于我的代码：

我不知道在哪里放置

markerCluster.add（markers）当我从文件中加载JSON文档时，我没有遇到任何问题

任何帮助都将不胜感激

/****
 Google Map
 ****/
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var iconBase = 'http://temp.net/sites/recall/images/';
    var markerCluster = new MarkerClusterer(map, {averageCenter: true, gridSize: 40});
    var markers = [];

    /****
     Create Markers and bind events. recall loaded from HTML
     ****/
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "*************",
        success: function (data) {
            $.each(data[0], function () {
                if (this.$oid == null) {

                    var markerPos = new google.maps.LatLng(this.lat, this.lng);

                    var marker = new google.maps.Marker({
                        position: markerPos,
                        map: map,
                        title: this.title,
                        icon: iconBase + this.icon
                    });
                    markers.push(marker);

                    var pano = null;

                    var data = this;
                    /****
                     Closure
                     ****/
                    (function (marker, data) {
                        google.maps.event.addListener(marker, 'click', function (e) {
                            map.setZoom(19);
                            map.setCenter(marker.getPosition());
                            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                            $("#slider-horizontal").on().delay(500).fadeIn('2000');
                            if (pano != null) {
                                pano.unbind("position");
                                pano.setVisible(false);
                            }

                            var panoramaOptions = {
                                navigationControl: false,
                                navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                                enableCloseButton: true,
                                addressControl: false,
                                linksControl: false,
                                panControl: false,
                                clickToGo: false,
                                scrollwheel: false,
                                draggable: false,
                                panControl: false,
                                enableCloseButton: true,
                                pov: {
                                    heading: eval(data.heading),
                                    pitch: eval(data.pitch),
                                    zoom: eval(data.zoom)
                                }
                            }

                            pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);

                            pano.bindTo("position", marker);
                            pano.setVisible(true);

                            var closeButton = document.querySelector('.images');

                            google.maps.event.addDomListener(closeButton, 'click', function () {
                                pano.setVisible(false);
                            });

                            google.maps.event.addListener(pano, 'visible_changed', function () {
                                $('#slider-horizontal').on().slider('value', 1).hide();
                                $('.images .old').css('opacity', 1);
                                map.setZoom(20);
                            });
                        });
                    })(marker, data);
                    /****
                     END Closure
                     ****/
                }
            });
        }
    });
    /****
     END $.each(recall, function()
     ****/
    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoom = map.getZoom();
        if (zoom < 15) {
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        } else {
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
        }
    });
    //{gridSize: 40} to prevent markers from being grouped even at max zoom
    //var markerCluster = new MarkerClusterer(map, markers, {averageCenter: true, gridSize: 40});
}//END renderMap()

renderMap();

但我将把它改为：

{
    "class": "jfkmotorcade",
    "image": "jfk_motorcade.jpg",
    "lat": "53.26648",
    "lng": "-9.070578999999952",
    "title": "JFK Motorcade",
    "icon": "president_seal_small.png",
    "heading": "56.40777127701934",
    "pitch": "-1.3747348931946495",
    "zoom": "1.5",
    "date": "",
    "comments": {},
    "tags": {}
}

您的map变量存在范围问题。如果我让它全球化，它就会起作用

var map = null;
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    // ...

（虽然您只提供了一条数据，但它没有群集…
我通过创建一个变量将AJAX调用引入正确的范围，解决了这个问题

以下是一些额外的数据：

[
    {
        "_id": {
            "$oid": "51c4e7375c90fdb357954af1"
        },
        "jfkmotorcade": {
            "class": "jfkmotorcade",
            "image": "jfk_motorcade.jpg",
            "lat": "53.26648",
            "lng": "-9.070578999999952",
            "title": "JFK Motorcade",
            "icon": "president_seal_small.png",
            "heading": "56.40777127701934",
            "pitch": "-1.3747348931946495",
            "zoom": "1.5",
            "date": "",
            "comments": {},
            "tags": {}
        },
        "quaystreet": {
            "class": "quaystreet",
            "image": "quay-street-old.jpg",
            "lat": "53.270433",
            "lng": "-9.054760999999985",
            "title": "Quay Street",
            "icon": "camera_small.png",
            "heading": "27.33813250741931",
            "pitch": "-0.593156926724266",
            "zoom": "1.5",
            "date": "",
            "comments": {},
            "tags": {}
        },
        "spannish_arch": {
            "class": "spannish_arch",
            "image": "spannish_arch.jpg",
            "lat": "53.270365",
            "lng": "-9.054955000000064",
            "title": "Spanish Arch",
            "icon": "camera_small.png",
            "heading": "143.84352819857685",
            "pitch": "-2.9656547695268896",
            "zoom": "1.17",
            "date": "",
            "comments": {},
            "tags": {}
        }
    }
]

固定代码

/****
 Collect Data from RESTful Service
 ****/
recall = {};
$.ajax({
    type: "GET",
    dataType: "json",
    url: "*********************",
    success: function (data) {
        $.each(data[0], function () {
            if (this.$oid == null)
                alert(this.class);
        });
        recall = data[0];
        renderMap();
    }
});

/****
 Google Map
 ****/
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var iconBase = 'http://temp.net/sites/recall/images/';

    var markers = [];
    /****
     Create Markers and bind events. recall loaded from HTML
     ****/
    $.each(recall, function () {
        /*place holder $.each(this, function(k, v) {
         });*/
        if (this.$oid == null)
        {
            var markerPos = new google.maps.LatLng(this.lat, this.lng);

            var marker = new google.maps.Marker({
                position: markerPos,
                map: map,
                title: this.title,
                icon: iconBase + this.icon
            });
            markers.push(marker);

            var pano = null;

            var data = this;
            /****
             Closure
             ****/
            (function (marker, data) {
                google.maps.event.addListener(marker, 'click', function (e) {
                    map.setZoom(19);
                    map.setCenter(marker.getPosition());
                    map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                    $("#slider-horizontal").on().delay(500).fadeIn('2000');
                    if (pano != null) {
                        pano.unbind("position");
                        pano.setVisible(false);
                    }

                    var panoramaOptions = {
                        navigationControl: false,
                        navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                        enableCloseButton: true,
                        addressControl: false,
                        linksControl: false,
                        panControl: false,
                        clickToGo: false,
                        scrollwheel: false,
                        draggable: false,
                        panControl: false,
                        enableCloseButton: true,
                        pov: {
                            heading: eval(data.heading),
                            pitch: eval(data.pitch),
                            zoom: eval(data.zoom)
                        }
                    }


                    pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);

                    pano.bindTo("position", marker);
                    pano.setVisible(true);

                    var closeButton = document.querySelector('.images');

                    google.maps.event.addDomListener(closeButton, 'click', function () {
                        pano.setVisible(false);
                    });

                    google.maps.event.addListener(pano, 'visible_changed', function () {
                        $('#slider-horizontal').on().slider('value', 1).hide();
                        $('.images .old').css('opacity', 1);
                        map.setZoom(20);
                    });
                });
            })(marker, data);
            /****
             END Closure
             ****/
        }
    });
    /****
     END $.each(recall, function()
     ****/
    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoom = map.getZoom();
        if (zoom < 15) {
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        } else {
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
        }
    });
    //{gridSize: 40} to prevent markers from being grouped even at max zoom
    var markerCluster = new MarkerClusterer(map, markers, {averageCenter: true, gridSize: 40});
}//END renderMap()

/****
 END Google Map
 ****/

/****
从RESTful服务收集数据
****/
召回={}；
$.ajax({
键入：“获取”，
数据类型：“json”，
url:“**********************”，
成功：功能（数据）{
$.each（数据[0]，函数（）{
if（this.$oid==null）
警报（本类）；
});
召回=数据[0]；
renderMap（）；
}
});
/****
谷歌地图
****/
函数renderMap（）{
var mylatng=new google.maps.LatLng（53.270433，-9.054760999985）；
变量myOptions={
缩放：6，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“地图画布”），myOptions）；
iconBase变量http://temp.net/sites/recall/images/';
var标记=[]；
/****
创建标记并绑定事件。从HTML加载调用
****/
$。每个（召回、功能（）{
/*占位符$。每个（此，功能（k，v）{
});*/
if（this.$oid==null）
{
var markerPos=new google.maps.LatLng（this.lat，this.lng）；
var marker=new google.maps.marker({
职位：markerPos，
地图：地图，
标题：这个，
图标：iconBase+this.icon
});
标记器。推（标记器）；
var-pano=null；
var数据=此；
/****
关闭
****/
（功能（标记、数据）{
google.maps.event.addListener（标记，'click'，函数（e）{
map.setZoom（19）；
map.setCenter（marker.getPosition（））；
setMapTypeId（google.maps.MapTypeId.HYBRID）；
$（“#滑块水平”）.on（）.delay（500）.fadeIn（'2000'）；
如果（pano！=null）{
全景解绑（“位置”）；
全景设置可见（假）；
}
变量全景选项={
导航控制：错误，
navigationControlOptions:{style:google.maps.NavigationControlStyle.ANDROID}，
enableCloseButton:true，
地址控制：false，
链接控件：false，
泛控制：错误，
单击多哥：false，
滚轮：错误，
可拖动：错误，
泛控制：错误，
enableCloseButton:true，
pov：{
标题：eval（数据标题），
螺距：eval（数据螺距），
缩放：eval（data.zoom）
}
}
pano=新的google.maps.StreetViewPanorama（document.getElementById（“地图画布”），全景选项）；
全景绑定到（“位置”，标记）；
全景设置可见（真）；
var closeButton=document.querySelector（'.images'）；
google.maps.event.addDomListener（关闭按钮，'单击'，函数（）{
全景设置可见（假）；
});
google.maps.event.addListener（pano，'visible_changed'，函数（）{
$（“#滑块水平”）.on（）.slider（'value'，1.hide（）；
$（'.images.old'）.css（'opacity'，1）；
map.setZoom（20）；
});
});
})（标记、数据）；
/****
端盖
****/
}
});
/****
结束$。每个（调用，函数（）
****/
google.maps.event.addListener（映射'zoom_changed'，函数（）{
zoom=map.getZoom（）；
如果（缩放<15）{
setMapTypeId（google.maps.MapTypeId.ROADMAP）；
}否则{
setMapTypeId（google.maps.MapTypeId.HYBRID）；
}
});
//{gridSize:40}以防止标记即使在最大缩放时也被分组
var-markerCluster=newmarkerclusterer（map，markers，{averageCenter:true，gridSize:40}）；
}//END renderMap（）
/****
结束谷歌地图
****/
你们能提供一个数据样本吗？@geocodezip我已经将样本数据添加到原始问题.tia中。
/****
 Collect Data from RESTful Service
 ****/
recall = {};
$.ajax({
    type: "GET",
    dataType: "json",
    url: "*********************",
    success: function (data) {
        $.each(data[0], function () {
            if (this.$oid == null)
                alert(this.class);
        });
        recall = data[0];
        renderMap();
    }
});

/****
 Google Map
 ****/
function renderMap() {

    var myLatlng = new google.maps.LatLng(53.270433, -9.054760999999985);
    var myOptions = {
        zoom: 6,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    var iconBase = 'http://temp.net/sites/recall/images/';

    var markers = [];
    /****
     Create Markers and bind events. recall loaded from HTML
     ****/
    $.each(recall, function () {
        /*place holder $.each(this, function(k, v) {
         });*/
        if (this.$oid == null)
        {
            var markerPos = new google.maps.LatLng(this.lat, this.lng);

            var marker = new google.maps.Marker({
                position: markerPos,
                map: map,
                title: this.title,
                icon: iconBase + this.icon
            });
            markers.push(marker);

            var pano = null;

            var data = this;
            /****
             Closure
             ****/
            (function (marker, data) {
                google.maps.event.addListener(marker, 'click', function (e) {
                    map.setZoom(19);
                    map.setCenter(marker.getPosition());
                    map.setMapTypeId(google.maps.MapTypeId.HYBRID);
                    $("#slider-horizontal").on().delay(500).fadeIn('2000');
                    if (pano != null) {
                        pano.unbind("position");
                        pano.setVisible(false);
                    }

                    var panoramaOptions = {
                        navigationControl: false,
                        navigationControlOptions: {style: google.maps.NavigationControlStyle.ANDROID},
                        enableCloseButton: true,
                        addressControl: false,
                        linksControl: false,
                        panControl: false,
                        clickToGo: false,
                        scrollwheel: false,
                        draggable: false,
                        panControl: false,
                        enableCloseButton: true,
                        pov: {
                            heading: eval(data.heading),
                            pitch: eval(data.pitch),
                            zoom: eval(data.zoom)
                        }
                    }


                    pano = new google.maps.StreetViewPanorama(document.getElementById("map-canvas"), panoramaOptions);

                    pano.bindTo("position", marker);
                    pano.setVisible(true);

                    var closeButton = document.querySelector('.images');

                    google.maps.event.addDomListener(closeButton, 'click', function () {
                        pano.setVisible(false);
                    });

                    google.maps.event.addListener(pano, 'visible_changed', function () {
                        $('#slider-horizontal').on().slider('value', 1).hide();
                        $('.images .old').css('opacity', 1);
                        map.setZoom(20);
                    });
                });
            })(marker, data);
            /****
             END Closure
             ****/
        }
    });
    /****
     END $.each(recall, function()
     ****/
    google.maps.event.addListener(map, 'zoom_changed', function () {
        zoom = map.getZoom();
        if (zoom < 15) {
            map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
        } else {
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
        }
    });
    //{gridSize: 40} to prevent markers from being grouped even at max zoom
    var markerCluster = new MarkerClusterer(map, markers, {averageCenter: true, gridSize: 40});
}//END renderMap()

/****
 END Google Map
 ****/