使用节点实施Mapbox时在浏览器中接收到“未定义要求”

编程问答 2022-06-08

问题描述

我正在学习课程，目前正在尝试实现mapBox.js。我直接遵循了mapBox文档中的所有说明，但是在控制台中收到错误消息：

Uncaught ReferenceError: require is not defined
<anonymous> http://localhost:8000/js/mapBox.js:3

这是我的mapBox.js文件：

var mapBoxgl = require('mapBox-gl/dist/mapBox-gl.js');

mapBoxgl.accesstoken =
  'pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2tnOHVibGllMDVuYjJ5cHFmbmpucndwZSJ9.KBzYV-QSHSChEb6QJpNpdg';
var map = new mapBoxgl.Map({
  container: 'map',style: 'mapBox://styles/mapBox/streets-v11',});

然后我将我的基本文件的头部附加到一个单独的.pug文件中：

block append head
link(href='https://api.mapBox.com/mapBox-gl-js/v1.12.0/mapBox-gl.css' rel='stylesheet')

enter image description here

解决方法

require仅是节点js（服务器端）中的函数，而不是浏览器中的函数。

在以下浏览器中查看使用require的答案： Node-style require for in-browser javascript?

或

或者，只需添加链接到mapbox js文件的脚本标签并删除您的require语句。

因此将其添加到您的html中： <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

然后将您的代码更改为：

mapboxgl.accessToken =
  'pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2tnOHVibGllMDVuYjJ5cHFmbmpucndwZSJ9.KBzYV-QSHSChEb6QJpNpdg';
var map = new mapboxgl.Map({
  container: 'map',style: 'mapbox://styles/mapbox/streets-v11',});
htmljavascriptmapboxmapboxpug