Mapbox.js -不能初始化map，除非它在全局作用域中可用

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

本文关键字：全局 作用域 js 不能 初始化 map Mapbox      更新时间：2023-09-26

我试图在我设置的模块模式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]

一切似乎都在按正确的顺序加载，所以我不知道出了什么问题。在初始化地图之前，我尝试为tile层做一个onready事件:

mapTiles = L.mapbox.tileLayer('heaversm.ac964855').on('ready',initializeMap);
var initializeMap = function(){
  map = L.mapbox.map('map','heaversm.b8aa0d0a')
}

你知道我需要做什么才能让它再次工作吗?

首先，你的代码有几个地方是错误的:<script="js/map.js"></script>应该是<script src="js/map.js"></script>。它应该给你:

Uncaught ReferenceError: L is not defined

接下来，你在你的onready事件处理程序中调用synBioModule的init方法，但synbioModule是一个实例synBio.main，它没有init方法。这应该显示为:

Uncaught TypeError: synBioModule。Init不是一个函数

我猜他们只是打字错误或c/p错误张贴在这里的代码，因为他们不符合你得到的错误。我已经在以下示例中纠正了这些错误:http://plnkr.co/edit/Or8fLh?p=preview使用我自己的公共令牌加上项目id和您的代码只是工作™。

当我使用无效的项目id时，我得到以下错误:

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

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

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

相关文章：