javascript - mapbox.js - 无法初始化 map ,除非它在全局范围内可用

标签 javascript mapbox module-pattern

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

<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')
  }
}

但是当我这样做时,我在尝试加载图 block 时收到 404 错误:

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

一切似乎都按正确的顺序加载,所以我不明白出了什么问题。我尝试在初始化 map 之前为图 block 图层执行 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

接下来您将调用 init方法synBioModule在你的 onready 事件处理程序中但是 synbioModule是一个实例synBio.main ,其中没有 init方法。这应该会给你带来:

Uncaught TypeError: synBioModule.init is not a function

我猜它们只是在此处发布代码时出现的拼写错误或 c/p 错误,因为它们与您收到的错误不符。我已在以下示例中纠正了这些错误:http://plnkr.co/edit/Or8fLh?p=preview使用我自己的公共(public) token 加上项目 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。

关于javascript - mapbox.js - 无法初始化 map ,除非它在全局范围内可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32568352/

相关文章:

javascript - 在 webpack 中使用 html-webpack-plugin 和 string-replace-loader

javascript - “this”在使用 Promise 的原型(prototype)方法中未定义并从同一对象的其他原型(prototype)方法调用?

android - 如何使用android sdk更改mapbox语言

javascript - 设置与自身相等的点有什么意义?

javascript - 从内部扩展命名空间模块

javascript - Angular 文件上传拖放区不起作用

javascript - 从img标签中获取(blob)的图片数据(与URL.createObjectURL相反的方法)

mapbox - 如何使用mapbox表达式设置 "text-font"

mapbox - mapbox gl js是否有任何空闲事件?

JavaScript 设计模式 : difference between module pattern and revealing module pattern?