Question

我想在Sencha Touch 2.3.1中使用Leaflet.js API，而leaflet.js会出现此错误：

Uncaught Error: Map container not found.

这些链接包含在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>

这是我的主视图代码：

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

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

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

这是'App.view.MapView'代码：

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());
          });

  },
});

我做错了什么？请帮忙。

Answer 1

Leaflet正在搜索一个不存在的DOM元素map（还有......）。

在DOM加载完成之前调用L.map('map')时会发生此问题。

Answer 2

猜测js是在DOM准备好之前执行的。尝试将代码包装在一个函数中，并将window.onload设置为等于你的函数。

Answer 3

好的，我似乎找到了解决方案。我更改了这一行：

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

到

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

Sencha Touch和Leaflet.js API

3 个答案: