骨干采集数据谷歌地图

时间:2015-02-10 00:34:00

标签: javascript google-maps backbone.js underscore.js

我无法在地图视图的render()函数中从集合中获取数据。我尝试过以多种方式获取数据,但我似乎无法正确地获取数据。这是我目前在https://jsfiddle.net/huntonas/pt17bygm/89/

的地方
APP = {};
APP.ArtPiece = Backbone.Model.extend({
    defaults: {
        first_name: null,
        title: null,
        location: null,
        description: null,
        last_name: null,
        longitude: null,
        latitude: null,
        type: null,
        medium: null
    }
});
APP.ArtPieces = Backbone.Collection.extend({
    model: APP.ArtPiece,
    url: 'https://data.nashville.gov/resource/dqkw-tj5j.json'
});
APP.artPieces = new APP.ArtPieces();

APP.Map = Backbone.Model.extend({
    defaults: {
        center: new google.maps.LatLng(36.159480, -86.792112),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
});
APP.map = new APP.Map();

APP.MapView = Backbone.View.extend({
    id: 'map',
    initialize: function () {
        this.collection.fetch();
        this.map = new google.maps.Map(this.el, this.model.attributes);
        this.render();
    },
    render: function () {

        this.collection.each(function (artPiece) {
            console.log(artPiece.toJSON());
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(artPiece.latitude, artPiece.longitude),
                title: artPiece.title
            });
            return marker;
        }, this);
        $('#map').replaceWith(this.el);
    }
});
APP.mapView = new APP.MapView({
    model: APP.map,
    collection: APP.artPieces
});

但它没有在console.log上显示任何内容。我假设这是因为集合中没有任何内容,但我不知道在集合上调用fetch()的位置。有帮助吗?感谢。

1 个答案:

答案 0 :(得分:2)

你的主要问题是双重的:

  1. Collection#fetch是一个AJAX电话,当你收集数据时,你没有任何注意事项。
  2. artPiece回调中的this.collection.each将是一个模型实例。模型不会将其属性存储在属性中,而是存储在attributes属性中,并由model.get('attribute_name')访问。
  3. 修复第一个问题非常简单。使用reset: true选项调用fetch(以便它会触发'reset'事件)然后将您的观看render绑定到集合'reset' {1}}事件:

    initialize: function() {
        this.collection.fetch({ reset: true });
        this.listenTo(this.collection, 'reset', this.render);
        //...
    }
    

    现在,当集合从远程服务器获取内容时,将调用您的视图render

    修复第二个也很容易,我们将在此过程中修复另一个问题。创建标记时,需要告诉它使用哪个映射,因此需要将map: this.map添加到构造函数参数中。如果我们这样做并开始使用get,我们就会:

    el: '#map',
    render: function () {
        this.collection.each(function (artPiece) {
            var marker = new google.maps.Marker({
                map: this.map,
                position: new google.maps.LatLng(
                    artPiece.get('latitude'),
                    artPiece.get('longitude')
                ),
                title: artPiece.get('title')
            });
        }, this);
    }
    

    无需说id: 'map',然后在replaceWith中致电render,您只需说el: '#map'即可。

    更新了演示:https://jsfiddle.net/ambiguous/jj8kopyk/