4

我正在尝试构建一个基于backbone.js 和传单的应用程序。用户可以拖动地图并查看地图上的标记。可以通过单击来选择标记。选择后，他们必须更改其图标和显示在（非弹出窗口）上的标记详细信息。

我的主干模型由几个实体组成：

标记模型包含纬度、经度类型、标题、isSelected

地图模型包含：地图中心、标记集合、选定标记

任何人都知道我如何制作这种功能？如何将传单标记作为主干视图？

4

1 回答 1

2

骨干视图和传单对象模型并不完美，因为标记不包含在Backbone.View.el应该表示的 DOM 元素中。标记当然有一个元素（可通过 访问）marker._icon，但在标记渲染到地图之前它不存在。

也就是说，您可以使用 Backbone 视图表示标记，只是不能使用events或任何el相关功能。我已经使用具有相同“问题”的 OpenLayers 成功实现了类似的视图，并且工作正常。

我认为这是最容易用代码解释的：

//MarkerView has no element
App.Views.MarkerView = Backbone.View.extend({

    initialize: function(options) {
        //pass map instance to the marker
        this.map = options.map;
        //create the marker object
        this.marker = L.marker([this.model.get('longitude'), this.model.get('latitude')]);
    },

    render: function() {    
        //append marker to the map
        this.marker.addTo(this.map);

        //can't use events hash, because the events are bound
        //to the marker, not the element. It would be possible
        //to set the view's element to this.marker._icon after
        //adding it to the map, but it's a bit hacky.
        this.marker.on('click', this.onClick);
    },

    onClick: function() {
        alert("click");
    }
});

//MapView renders a map to the #map element
App.Views.MapView = Backbone.View.extend({
    id:"#map",
    render: function() {
        //render map element
        var map = this.map =  L.map(this.$el.attr('id'))
            .setView([this.model.get('centerLon'),  this.model.get('centerLat') ], 13)
            .addLayer(L.tileLayer(this.model.get('layerUrl'), { maxZoom: 18 }));

        //render each marker
        this.markerViews = this.model.get('markers').map(function(marker) {
            return new App.Views.MarkerView({model:marker, map:map}).render();
        });
    }
});

这是 JSFiddle 上的演示。

于 2013-01-25T09:00:45.387 回答