Question

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

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

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

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

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

Answer 1

骨干视图和传单对象模型不是完美的契合，因为标记不包含在DOM元素中，这是Backbone.View.el应该表示的。标记做当然有一个元素（可通过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();
        });
    }
});

Here's a demo on JSFiddle

Backbone.js集合中的传单标记？

1 个答案: