Sencha Touch 和 Leaflet.js API

Posted 2023-02-25

【中文标题】Sencha Touch 和 Leaflet.js API

【英文标题】：Sencha Touch and Leaflet.js API

【发布时间】：2014-05-02 08:25:59

【问题描述】：

我想将 Leaflet.js API 与 Sencha Touch 2.3.1 一起使用，而 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());
          );

  ,
);

我做错了什么？请帮忙。

【参考方案1】：

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

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

【讨论】：

这不是什么时候包含脚本的问题，而是什么时候初始化地图的问题。

【参考方案2】：

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

【参考方案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);

【讨论】：

所以 id 选择器似乎不起作用......很奇怪。我想知道为什么。

我正在尝试像答案一样，但地图没有出现。我该如何解决这个问题？