Question

我试图在我设置的模块模式mapbox项目中使用javascript。当我尝试在模块模式中初始化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>。哪个应该给你：

未捕获的ReferenceError：L未定义

接下来，您在onready eventhandler中调用了init synBioModule方法，但synbioModule是一个实例synBio.main，它没有init方法。这应该会给你一个：

未捕获的TypeError：synBioModule.init不是函数

我猜他们在这里发布代码时只是错字或c / p错误，因为它们与你得到的错误不一致。我已在以下示例中更正了这些错误：http://plnkr.co/edit/Or8fLh?p=preview使用我自己的公共令牌加上项目ID，您的代码正常工作。

当我使用无效的项目ID时，我会收到以下错误：

获取http://a.tiles.mapbox.com/v4/INVALID_PROJECT_ID?access_token=VALID_PUBLIC_TOKEN 404（未找到）

无法在http://a.tiles.mapbox.com/v4/INVALID_PROJECT_ID.json?access_token=VALID_PUBLIC_TOKEN
加载TileJSON

您必须使用无效的项目ID。

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

1 个答案: