Question

我正在尝试开发一个基于Backbone JS的应用程序。我想嵌入一个基于传单JS的OpenStreetMap地图，但我找不到任何教程。

Answer 1

我发现上面的答案错误地渲染了地图。

Leaflet期望在初始化地图时，包含元素已经位于DOM中。这就是使用setTimeout“工作”的原因。当setTimeout触发时，View已被附加到页面，因此Leaflet可以正确初始化。

我认为拆分追加步骤和渲染步骤更加清晰。通过在呈现之前将视图附加到页面，您可以确保Leaflet正确初始化而无需使用setTimeout。

这是一个基于上面的例子：

var MapView = Backbone.View.extend({

  render: function () {
    this.map = L.map(this.el).setView([55.75, 37.58], 10);

    L.tileLayer('http://{s}.tile.cloudmade.com/4e5f745e28654b7eb26aab577eed79ee/997/256/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
      maxZoom: 18
    }).addTo(map);

    return this;
  }

});

$('body').append(MapView.el);
MapView.render();

Answer 2

我已经创建了一个jsfiddle来展示如何在Backbone.View中使用Leaflet： http://jsfiddle.net/theotheo/CJcK6/

// bare template
<script type='template' id='map-template'>
   <div id="map"></div>
</script>

// simple view
var MapView = Backbone.View.extend({
  template: _.template($('#map-template').html()),
  render: function () {
    this.$el.html(this.template());

    var map = L.map(this.$('#map')[0]).setView([55.75, 37.58], 10);
    L.tileLayer('http://{s}.tile.cloudmade.com/4e5f745e28654b7eb26aab577eed79ee/997/256/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>[…]',
      maxZoom: 18
    }).addTo(map);

    return this;
  }
});

随意问。

<强>更新：

jQuery Mobile示例：http://jsfiddle.net/theotheo/mh6mA/

如何将js传单与Backbone js集成？

2 个答案: