1

BackboneJSをベースにしたアプリケーションを開発しようとしています。リーフレットJSに基づいたOpenStreetMapマップを埋め込みたいのですが、チュートリアルが見つかりませんでした。

4

2 に答える 2

8

マップを正しくレンダリングしないために、上記の答えを見つけました。

リーフレットは、マップが初期化されるときに、含まれている要素がすでにDOMに配置されていることを想定しています。setTimeoutこれが「作品」を使う理由です。起動するまでにsetTimeout、ビューがページに追加されているため、リーフレットを正しく初期化できます。

追加ステップとレンダリングステップを分解する方がクリーンだと思います。レンダリングする前にビューをページに追加することで、を使用せずにリーフレットが適切に初期化されるようにすることができます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();
于 2013-02-23T01:50:56.983 に答える
2

Backbone.View内でLeafletを使用する方法を示すためにjsfiddleを作成しました：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/

于 2013-01-13T16:12:24.443 に答える