Question

我查看了链接的答案但是我认为我逻辑上遵循它的流程我不能将它应用于我的代码： Google Maps API Marker Clusterer and 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();

示例数据：目前REST返回：

[
    {
        "_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": {}
        }
    }
]

但我会将其改为：

{
    "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": {}
}

Answer 1

您的地图变量存在范围问题。如果我把它全局化，它就会起作用。

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);
    // ...

（虽然因为你只提供了一个数据，但它不会聚集......）

Answer 2

我设法通过创建一个变量来解决问题，以便将AJAX调用转换为正确的Scope。

这是一些额外的数据：

[
    {
        "_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
 ****/

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

2 个答案: