0

通过骨干网，我从谷歌地图中获取结果以返回用户所在位置的标记。结果填充了一个集合，每次用户移动地图时我都会清除该集合，因为基于新的位置边界会发生新的提取（我使用谷歌地图空闲事件来获取此信息并更改集合的 URL）。

为了管理标记，我用每个标记填充了一个数组。

我遇到的问题是我得到了第一组标记，但是当地图移动时它没有写入任何新标记，当您检查标记数组时，它的结果与上次相同。如果我进行 AJAX 调用，我会得到想要的结果，但我想将这一切都保存在骨干集合中，就像我对模型进行其他处理一样。

/* Tracking Page Items */
var allPlace = Backbone.Model.extend({

    createMarker:function(){      

        var marker = new google.maps.Marker({
            position: this.getLatLng(),
            title: this.get("name"),        
            location_type: this.get("type")
        });

        return marker;       

    }

});

var MarkersCollection = Backbone.Collection.extend({

    model: allPlace,

    url:function(){                   
        return '/'
    }

})

var markersArray = [];
var mapAll = Backbone.View.extend({

    initialize: function() {
        _.bindAll(this, 'render', 'createMarkers'); // get access to this in other methods
        this.collection.bind('reset', this.render, this);
    },

    render: function() {

    // Load map scripts and initialise
        if(typeof google === "undefined"){
            nzp.loadGoogleMap();
        } else {
            nzp.initializeMap();
        };

    // Current location                 
        myLocations = {
            lat: this.collection.lat,
            lng: this.collection.lng
        };


    // Listen for map movement
        var self = this;
        google.maps.event.addListener(map, 'idle', function() {
            var bounds = map.getBounds();   
            var lat1 = bounds.ca.b;             
            var lng1 = bounds.ea.b;
            var lat2 = bounds.ca.f;
            var lng2 = bounds.ea.f;         
            self.showMarkers(lat1, lng1, lat2, lng2);
            });
        },

    // update URL based on new bround   
        showMarkers: function(lat1, lng1, lat2, lng2) {

            var markerCollection = new MarkersCollection;
            nzp.infoWindow = new google.maps.InfoWindow();

            lat = myLatlng.Xa;
            lng = myLatlng.Ya;
            lat1 = lat1;
            lng1 = lng1;
            lat2 = lat2;
            lng2 = lng2;

            // Collection URL build from parameter adn current location
                markerCollection.url = "http://blah.com/locator/api/locations?api_key=XXX&nearby_latitude="+lat+"&nearby_longitude="+lng+"&lat1="+lat1+"&lng1="+lng1+"&lat2="+lat2+"&lng2="+lng2+"&max=10&format=jsonp&callback=?";     

            // Fetch collection
            markerCollection.fetch({

                success: function(results) {

                    // Clear the markers array
                    for (i in markersArray) {
                        markersArray[i].setMap(null);
                    }
                    markersArray.length = 0;

                    // Loop over items in collection

                    results.map(function(item){

                        var marker = item.createMarker();
                        marker.setMap(map);

                        // Create a marker based on each item
                        (function(marker, item) {

                            google.maps.event.addListener(marker, "click", function(e) {
                            nzp.infoWindow.setContent(infowindowContent(item)); // Info window content is processed in a method within the model 
                            nzp.infoWindow.open(map, marker);
                            });             

                            // Place each marker in the markers arrya
                                markersArray.push(marker); // Push markers into an array so they can be removed

                        })(marker, item);

                    }, this);
                }
            });

            // Set markers to vidsible
                $.each(markersArray, function(index, item){         
                    markersArray[index].setVisible(true);
                });

});
4

1 回答 1

0

修复了这个。该问题与传递给 API 的值有关，而不是与我想的那样更新集合 URL 的方式有关。

我传递了一个边界和一个当前位置和边界，这导致 API 总是返回相同的结果。我拥有的代码的工作 AJAX 版本在 URL 中有错字，实际上允许 API 返回正确的结果。

于 2012-10-14T20:38:55.080 回答