mapbox.js - 无法初始化地图，除非它在全球范围内可用

Question

我正在尝试在我设置的模块模式 javascript 项目中使用 mapbox。当我尝试在我的模块模式中初始化 mapbox 时，当我使我的所有变量都可以访问全局范围时在原型中工作的相同代码不起作用。换句话说，在我有这个之前：

<html>
  <head>
  <script="js/mapbox.js"></script>
  </head>
  <body>
  <div id="map"></div>
  <script>
    L.mapbox.accessToken = '[access_token]';
    var map = L.mapbox.map('map','heaversm.b8aa0d0a')
  </script>
  </body>
</html>

哪个有效。现在我拥有的是：

<html>
  <head>
  <script="js/mapbox.js"></script>
  </head>
  <body>
  <div id="map"></div>
  <script src="js/main.js></script>
  <script="js/map.js"></script>
  </body>
</html>


//main.js:

var synBio = {};
var synBioModule;
synBio.main = function() {
  self.mapModule = new synBio.map();
  self.mapModule.init();
}

$(document).ready(function(){
    synBioModule= new synBio.main();
    synBioModule.init();
});

//map.js

synBio.map = function(){
  L.mapbox.accessToken = '[access_token]';
  var self = this;
  var map;
  self.init = function(){
    map = L.mapbox.map('map','heaversm.b8aa0d0a')
  }
}

但是当我这样做时，我在尝试加载图块时收到 404 错误：

http://a.tiles.mapbox.com/v4/heaversm.ac964855.json?access_token=[access_token]

所有内容似乎都按正确的顺序加载，所以我看不出有什么问题。在初始化地图之前，我尝试为图块图层执行 onready 事件：

mapTiles = L.mapbox.tileLayer('heaversm.ac964855').on('ready',initializeMap);

var initializeMap = function(){
  map = L.mapbox.map('map','heaversm.b8aa0d0a')
}

有什么想法可以使它再次运行吗？

Answer 1

首先，您的代码有几处错误：<script="js/map.js"></script> 应该是 <script src="js/map.js"></script>。哪个应该给你：

Uncaught ReferenceError: L is not defined

接下来，您将在就绪事件处理程序中调用 synBioModule 的 init 方法，但 synbioModule 是一个实例 synBio.main，它没有 init方法。那应该让你：

Uncaught TypeError: synBioModule.init is not a function

我猜它们只是拼写错误或 c/p 在此处发布代码时出现的错误，因为它们与您收到的错误不符。我已在以下示例中更正了这些错误：http://plnkr.co/edit/Or8fLh?p=preview 使用我自己的 public 令牌加上项目 ID，您的代码就可以正常工作™。

当我使用无效的项目 ID 时，出现以下错误：

GET http://a.tiles.mapbox.com/v4/INVALID_PROJECT_ID?access_token=VALID_PUBLIC_TOKEN 404 (Not Found)

could not load TileJSON at http://a.tiles.mapbox.com/v4/INVALID_PROJECT_ID.json?access_token=VALID_PUBLIC_TOKEN

您使用的项目 ID 一定无效。

mapbox.js - 无法初始化地图，除非它在全球范围内可用

mapbox.js - can't initialize map unless it is available in global scope

javascript

module-pattern

mapbox