传单地图图块不会在 Meteor Cordova 应用程序上加载

Question

我正在构建一个 meteor/cordova 应用程序，它包含一个带有 Leaflet 地图的模板，其中的图块和图标由 mapbox 提供（我不确定它是否相关）。

该应用正在使用 bevanhunt:leaflet 包，并且运行在网络浏览器上部署时没问题。

var map; //outside of the template

Template.map.rendered = function() {
    L.Icon.Default.imagePath = 'images';

    if (!map) {
        map = L.map('map', {
            doubleClickZoom: false,
            zoomControl: false
        });
    }

    var attributionText = "<a href='http://zencity.io/' target='_blank'>ZenCity &copy; </a>" +
    "<a href='https://www.mapbox.com/about/maps/' target='_blank'> Mapbox &copy;" +
    " OpenStreetMap</a>";

     L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: attributionText,
        id: 'someID'
    }).addTo(map);
  //some code to put makers on the map
}

我应该说标记/弹出窗口看起来很好（但它们的图像不存在；一个小问题，我会尽力解决），但地图似乎没有初始化。

我是否需要在 Template.map.rendered 代码之外创建地图？我是否需要添加配置才能使 leaflet / mapbox 与 Cordova/android 一起使用？

如有任何帮助，我们将不胜感激。

Answer 1

Meteor 1.0.4 introduced 将 App.accessRule 设置为 mobile-config.js。您需要像这样为图块提供者添加 URL：

App.accessRule('https://*.tiles.mapbox.com/*');

基本上，出于安全原因，Cordova 应用可能无法连接到他们喜欢的任何 URL。这就是这个白名单的用途。它限制了可以加载的 URLs 内容。由于磁贴 URL 与您的应用程序 URL 不同，因此默认情况下会被拒绝。使用 App.accessRule 设置允许额外的 URLs。支持的域模式在 Android 和 iOS 之间略有不同，您可以在 the official docs 中找到它们。星号 (*) 可以（并且必须）用作通配符，此处用于支持动态子域。

传单地图图块不会在 Meteor Cordova 应用程序上加载

Leaflet map tiles don't load on a Meteor Cordova app

android

leaflet

cordova

meteor

mapbox