0

我查看了链接的答案，但尽管我认为我在逻辑上遵循它的流程，但我无法将其应用于我的代码： 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": {}
}
4

2 回答 2

0

您的地图变量存在范围问题。如果我让它全球化，它就可以工作。

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

（虽然您只提供了一条数据，但它不会聚集......）

于 2013-06-25T16:17:42.650 回答
0

我设法通过创建一个变量以将 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
 ****/
于 2013-06-25T17:25:52.260 回答