Sencha Touch và Leaflet.js API

Question

Tôi muốn sử dụng Leaflet.js API với Sencha cảm ứng 2.3.1 và leaflet.js cho lỗi này:

Uncaught Error: Map container not found. 

Các liên kết này có trong index.html

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> 
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> 

Đây là mã mainview tôi:

Ext.define('App.view.Main', { 

    extend: 'Ext.Container', 
    xtype: 'main', 
    requires: [ 
     'App.view.MapView', 
    ], 

    config: { 
     layout: 'card', 
     items: [ 
     { 
      itemId: 'mapview', 
      xtype: 'mapview', 
      id : 'map' 
     } 
     ] 
    } 
}); 

Đây là 'App.view.MapView' mã:

012.351.

Ext.define("App.view.MapView", { 
    extend: 'Ext.Container', 
    requires: ['Ext.device.Geolocation'], 
    xtype: 'mapview', 
    initialize: function(){ 

      var map = L.map('map').setView([47.36865, 8.539183], 13); 
      var layer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); 

      map.on('click', function() { 
      console.log('Click-Event on map/Time: ' + Date.now()); 
      }); 

    }, 
}); 

Tôi đang làm gì sai? Hãy giúp tôi.

Answer 1

Ok, có vẻ như tôi đã tìm được giải pháp. Tôi đã thay đổi dòng này:

var map = L.map('map').setView([47.36865, 8.539183], 13); 

để

var map = L.map(this.element.dom).setView([47.36865, 8.539183], 13); 

Answer 2

Tờ rơi đang tìm kiếm phần tử DOM, map, không có ở đó (chưa ...).

Sự cố này xảy ra khi L.map('map') được gọi trước khi DOM tải xong.

Answer 3

Đoán js được thực hiện trước khi DOM đã sẵn sàng. Hãy thử gói mã của bạn trong một hàm và thiết lập window.onload bằng hàm của bạn.