运行 npm run dev || 时出现总线错误npm 启动
我似乎无法在我的 macOS 计算机上运行 npm run dev 或 npm start 。 每次尝试这样做时，我都会收到总线错误消息，输出通常如下所示： klvn git:(主) ✗ npm run dev ...
当 package.json 指定不同的端口时，npm start 仅在端口 3000 上打开
我有一个 React 项目，它有多个可以在 Windows 机器上运行的构建脚本，但在我的 Mac 上，当我运行 npm start 时，它会忽略 package.json 并在端口 3000 上打开。 “开始”：“...
我有一个以“npm start”启动的应用程序 我想在后台运行它。 该应用程序托管在aws EC2上。 我试过 ： npm 启动 & 如果我断开 ssh 连接则不起作用 能...
我阅读了一些 Docker 和 Node.js 最佳实践文章，例如https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md 或使用
安装pact-lang-api后Webpack/polyfill出错
在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息： ./
express.Router 无法在 IIS 托管节点应用程序中工作
在本地运行我的 Node/Express 应用程序（例如 npm start）时，我的路由加载没有问题。但是，当应用程序托管在 IIS 中时（已尝试 iisnode、反向代理和 httpplaformhandler），它会给出...
当我在“sanity init”成功后尝试执行“sanity start”时出现错误
我正在尝试安装 Sanity studio，我按照以下步骤操作： npm install --global @sanity/cli 理智安装 理智初始化 在初始化步骤之后，我尝试运行下一步： 理智开始 但它...
IISNode 对于路由返回 404，但 Node 返回路由
我使用 iisnode 通过 IIS 在 Windows Server 上托管 NodeJS 应用程序。该应用程序具有 Express 路线，当我通过节点（例如 NPM Start）在服务器上启动该应用程序时，它会执行获取路线，而无需...
使用 cpanel 在 Alma Linux 服务器上部署 Shopify 应用程序
我们正在尝试在我们的服务器上部署第三方 Shopify 应用程序/插件。我们不使用 Heroku 也不使用 Fly.io。 安装时，我们到达应用程序根据命令运行的位置（npm run start + ENV_VARI...
我正在尝试将 Angular 版本从 16 升级到 17，但当我执行 npm start 时，它会抛出以下错误。有人可以告诉我该怎么做吗？
./src/main.ts - 错误：模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）： 错误：无法将类型实体 i11.MatLegacySelectModule 解析为符号 ./src/polyfills.ts - 错误：
我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中： 代码： 我正在尝试使用上面的图像进行集中输入。我按照位置文档进行操作，但不知何故图像没有水平集中： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Title --> <title>Title</title> <!-- Css --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container position-absolute top-50 start-50 translate-middle"> <embed class="logo" src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html> 我尝试手动执行此操作并使用 display flex，但没有成功。 使用text-center链接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Title --> <title>Title</title> <!-- Css --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body> <div class="container text-center"> <embed class="logo " src="https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Logo"> <form action="/streams" method="POST"> <div class="input-group"> <input class="form-control border-danger border-5" type="text" aria-describedby="start-button"> <button class="btn btn-danger" type="submit" id="start-button">Click</button> </div> </form> </div> </body> </html>
“npm WARN EBADENGINE”是什么原因导致的？
使用 npm install 生成 package-lock.json 文件时，出现以下错误： npm WARN EBADENGINE 不支持的引擎 { npm 警告 EBADENGINE 包：'[email protected]'， npm 警告 EBADENGINE 需要：{ ...
npm v9.4.0 不支持 Node.js v14.15.0
npm 的接受版本是什么（Node.js v14.15.0）。给我以下错误： npm WARN cli npm v9.4.0 不支持 Node.js v14。 15.0。您可能应该升级到 npm WARN cli 新版本没有...
我从 NPM 下载软件包时遇到网络错误：屏幕截图。我该如何修复它？ D:\ionic\abc\abc\>npm install @capacitor/push-notifications npm 错误！代码 EPROTO npm 错误！系统...
安装 Angular CLI 时出现 Npm Angular 警告
当我尝试通过以下方式安装 CLI 时收到 npm 警告： npm install -g @angular/cli: C:\Users\myuser>npm install -g @angular/[email protected] npm 警告已弃用 [email protected]：此模块...
执行 npm install 时，使用 React-scripts 版本创建 React App 错误
对于我的 Create React 应用程序，我在执行 npm install 时收到以下错误 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖关系树 npm 错误！ npm 错误！解析时：[email protected]...
我正在使用以下文档学习放大器 https://docs.amplify.aws/angular/start/getting-started/installation/ https://docs.amplify.aws/angular/start/getting-started/setup/ 但同时
运行代码时 导入项目1、项目2、项目3 从线程导入线程 线程(目标=Project1.py).start() 线程(目标=Project2.py).start() 线程(目标=Project3.py).start() 到...
终端无法识别 npm 和节点，使用 nvm 安装（在 MAC 上）
我在Mac上使用NVM安装了nodejs和npm，每当我打开新终端时，它总是忘记npm和node。我正在使用苹果电脑 我面临这个错误 未找到 npm npm-v 我期待着 npm ve...
我目前使用的是 Angular 版本 13。 当我尝试运行 npm install 命令时，出现以下错误。如何修复这些错误？ > npm 安装 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
扫描字符串文字 common.gypi 时安装 npm 包时出错 -- node-gyp EOL
我正在使用 npm i 提取 React 应用程序的依赖项，我得到： gyp 信息 spawn args 'build', npm 错误！ gyp 信息生成参数 '-Goutput_dir=.' npm 错误！ gyp 信息生成参数] npm 错误！追溯（最...
无法解决依赖关系：来自@material-ui/[email protected]的peer React@"^16.8.0 || ^17.0.0"
我使用创建了一个反应项目 npm 初始化 -y npm 安装 React React-dom 然后我尝试安装 Material UI npm 安装@material-ui/core 它得到错误 npm 错误！代码 ERESOLVE npm 错误！解决...
我正在安装这些 npm 软件包： npm 我表达 body-parser bcrypt cors dotenv gridfs-stream multer multer-gridfs-storage 头盔 morgan jsonwebtoken mongoose 但是，当...
从自定义注册表安装包时出现 npm Shrinkwrap 问题
npm Shrinkwrap 无法按预期工作。 当我安装 @zowe/[email protected] 时未使用命令 npm 指定自定义注册表...
当我尝试安装React时，我收到此错误如何修复它并安装React
npm 错误！代码 ENOTFOUND npm 错误！系统调用 getaddrinfo npm 错误！错误号 ENOTFOUND npm 错误！对 http://registry.npmjs.org/create-react-app 的网络请求失败，原因： getaddrinfo ENOTFOUND your_proxy...
如何对使用 package.json 中的 file: 模式安装的本地 NPM 包进行 NPM 重复数据删除对等依赖项？使用 npm 安装软件包时，对等依赖项会正确删除重复数据
我正在将 npm 库发布到artifactory 上的npm 存储库。该库是使用 Angular 构建的，dist 文件夹和 package.json 看起来正确。发布时，其自身的请求已发布...
我正在尝试在我的项目中安装包“react-google-login”以进行用户身份验证。 这是错误代码： npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解决依赖性
npm 警告 ERESOLVE 在 npm 安装期间覆盖对等依赖关系
在我的 React 应用程序上运行 npm install 时，我看到以下日志。但是，npm 安装完成，我可以看到在 node_modules 下添加了 deps 另外，我的应用程序确实启动了。我的问题是是否可以
我尝试在 npm 上发布我的 Angular 库。 但我收到错误 npm 错误！该包已被标记为私有。从 package.json 中删除“private”字段以发布它。 但我没有任何公关...
如何修复 Namecheap 的 npm WARN 生命周期错误？
这是我在 Namecheap Cpanel 中运行 NPM install 时遇到的错误： 使用“--scripts-prepend-node-path”选项包含执行 npm 的节点二进制文件的路径。 我尝试添加一个
我正在寻找一种从 npm 注册表 api 查询 npm 包版本的方法。 到目前为止我发现的是我需要查询整个包元数据并从那里过滤版本，示例：...
正确使用 firebase 和 @firebase npm 包
当我向 firebase >9.0.0 包添加依赖项时，npm install 会同时下载 node_modules\ firebase 和 node_modules\ @firebase （没有提及）。 我知道@firebase 是...
运行“expo start”时显示错误消息（错误：UnhandledPromiseRejectionWarning）
我刚刚将我的 Expo 项目克隆到我的新 MacBook 上。我已经使用yarn安装了软件包和expo global，但没有运气运行expo start。错误信息如下： （节点：39137）
我们在大多数项目中都使用 npm，除了一个私有模块，我们使用 YARN 来全局管理其他项目中依赖项的版本，仅仅是因为 npm 并不平坦......
在 Windows cmd 中通过 net start opensshd 启动 OpenSSH 时出现错误 1067
我尝试通过以下命令行启动 opensshd 应用程序：net start opensshd 但在 CMD 中按 Enter 后遇到以下消息： OpenSSH 服务器服务正在启动。 OpenSSH 服务器服务
我的工作流程的一部分涉及使用命令 npm install 安装 npm 软件包的步骤，但由于某些未知的原因，我在下面收到此错误。我不确定下面的错误是什么或者......
我想在div滚动到视口时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <... 我想在 div 滚动到视口中时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <div class="box"></div> JS： $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); 总结一下：当div滚动到视口中时，应该启动“start”函数。但触发一次后就不能再触发了。 小提琴 您可以设置一个标志，例如： var started = false; function start() { if(!started) { alert("hello"); } started = true; } 演示 $(document).ready(function() { var started = 0; function start() { if(started==0) { alert("Alert only once"); } started = 1; } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); *{margin:0;} .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <br /> <center> <br /> <h1>scroll down</h1> </center> <div class="box"></div> 有很多方法可以解决这个问题。您可以删除事件侦听器（因为您使用的是 jQuery，所以我将使用 on 和 off 方法）： $(window).on('scroll', function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } $(window).off('scroll'); }); 如果你希望窗口滚动方法在启动方法满足要求后停止..你可以这样做 $(document).ready(function() { var toggleScroll = false; function start() { alert("hello"); } $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); toggleScroll = true; start(); } else { $(".box").removeClass("green"); } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } }); 当start()没有类$(".box)（在一定量的滚动后添加）时，只需运行"green"函数。 $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ($(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { if (!$(".box").hasClass("green")) { $(".box").addClass("green"); start(); } } else { $(".box").removeClass("green"); } }); }); .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div>
如果需要很长时间，如何在Javascript中设置稍后执行的函数？
函数等待() { 让 a = Date.now() while (Date.now() - 一个 < 3000) { //loop } console.log('waiting ends...') } function start(){ console.log('starts...') wait() }
React 的“npm create vite@latest”问题：无法初始化项目
我在尝试使用命令 npm create vite@latest 创建新的 React 项目时遇到问题。尽管遵循文档并确保我拥有最新版本的...
如何在 XLSX npm 中创建以分号分隔的 .csv 文件
我正在尝试使用 npm 中的 XLSX 包创建一个 csv 文件，结果是用 , （冒号）分隔的值，我想用 ; （分号）。我该怎么做呢？ LSX.utils.book_append_sheet(工作...
"message": "方法 Illuminate\Auth\SessionGuard::factory 不存在。",
我正在尝试使用 "tymon/jwt-auth": "^1.0" 将 JWT 添加到 Laravel Framework 7.26.1。已按照文档设置一切。 https://jwt-auth.readthedocs.io/en/develop/quick-start/...
我正在尝试安装 salesforce CLI (linux)。我已遵循本指南的每个步骤，但我不断收到相同的错误/输出。 脚步： npm uninstall sfdx-cli --global -> 首先卸载 sfdx npm
使用 @aws-sdk/client-sqs npm 包从 EKS 集群 pod 推送到 AWS SQS 时出错
我在 AWS EKS 集群中使用 @aws/client-sqs npm 包将消息推送到标准 SQS 队列并收到以下错误： CredentialsProviderError：169.254.170.23 不是有效的容器我...
npm 在 MacOs M1 上的 expo React Native 项目中安装失败
我试图在expo React Native项目中安装一个包，但没有成功。根据相关的一些建议，我删除了node_modules文件夹，然后尝试运行npm install来安装...
最近我在度假，互联网连接有限。我正在用 Node.js 开发一个应用程序，突然需要一些 NPM 包。这严重阻碍了开发，我
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
尝试在 React 应用程序中使用“azure-maps-animations”NPM 包时出现“未找到导出”错误消息
我们正在尝试在 React 应用程序中使用 Azure Maps Animations NPM 包，但无法导入它。 我们尝试了以下代码： 从“azure-maps-animations”导入{animations}； //
我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： 我决定通过创建挪威夏季的公路旅行地图来开始学习 Leaflet 和 JavaScript，这是我的项目的可重复示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" /> <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script> <style> body { margin: 0; } #map { width: 100%; height: 100vh; } .carousel { max-width: 300px; margin: 10px auto; } .carousel img { width: 100%; height: auto; } /* Custom styling for Geiranger popup content */ .geiranger-popup-content { max-width: 500px; padding: 20px; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([61.9241, 6.7527], 6); var streetViewMarker = null; // Variable to keep track of the Street View marker L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); var roadTripCoordinates = [ [59.9139, 10.7522], // Oslo [62.2622, 10.7654], // Tynset [62.5949, 9.6926], // Oppdal [63.0071, 7.2058], // Atlantic Road [62.1040, 7.2054] // Geiranger ]; // Function to initialize Slick Carousel for a specific marker function initSlickCarousel(markerId, images) { $(`#${markerId}_carousel`).slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: true }); // Add images to the carousel images.forEach(img => { $(`#${markerId}_carousel`).slick('slickAdd', `<div><img src="${img}" alt="Image"></div>`); }); } // Add markers for each destination with additional information and multiple pictures var destinations = [ { coordinates: [59.9139, 10.7522], name: 'Oslo', info: "../07/2023 : Start of the road-trip", images: ['https://www.ecologie.gouv.fr/sites/default/files/styles/standard/public/Oslo%2C%20Norvege_AdobeStock_221885853.jpeg?itok=13d8oQbU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.2622, 10.7654], name: 'Tynset', info: "../07/2023 : Fly-fishing spot 1", images: ['https://www.czechnymph.com/data/web/gallery/fisheries/norway/glommahein/Kvennan_Fly_Fishing_20.jpg', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.5949, 9.6926], name: 'Oppdal', info: "../07/2023 : Awesome van spot for the night", images: ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFRtpLlHWr8j6S2jNStnq6_Z9qBe0jWuFH8Q&usqp=CAU', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [63.0071, 7.2058], name: 'Atlantic Road', info: "../07/2023 : Fjord fishing", images: ['https://images.locationscout.net/2021/04/atlantic-ocean-road-norway.jpg?h=1100&q=83', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] }, { coordinates: [62.1040, 7.2054], name: 'Geiranger', info: "../07/2023 : Hiking 1", images: ['https://www.fjordtours.com/media/10968/nicola_montaldo-instagram-26th-may-2021-0717-utc.jpeg?anchor=center&mode=crop&width=1120&height=1120&rnd=133209254300000000&slimmage=True', 'https://via.placeholder.com/300', 'https://via.placeholder.com/300'] } ]; // Use Leaflet Routing Machine with Mapbox Routing plugin to get and display the route L.Routing.control({ waypoints: roadTripCoordinates.map(coord => L.latLng(coord[0], coord[1])), router: L.Routing.mapbox('MAP_BOX_KEY'), draggableWaypoints: false, addWaypoints: false, lineOptions: { styles: [{ color: 'brown', opacity: 0.7, weight: 2 }] } }).addTo(map); // Remove the leaflet-routing-container from the DOM var routingContainer = document.querySelector('.leaflet-routing-container'); if (routingContainer) { routingContainer.parentNode.removeChild(routingContainer); } destinations.forEach(function (destination) { var marker = L.marker(destination.coordinates).addTo(map); var markerId = destination.name.replace(' ', '_'); marker.bindPopup(` <b>${destination.name}</b><br> ${destination.info}<br> <div class="carousel" id="${markerId}_carousel"></div> `).on('popupopen', function () { // Initialize Slick Carousel when the marker popup is opened initSlickCarousel(markerId, destination.images); }).openPopup(); }); // Add Street View panorama on map click map.on('click', function (e) { if (streetViewMarker) { // Remove the existing Street View marker map.removeLayer(streetViewMarker); } let lat = e.latlng.lat.toPrecision(8); let lon = e.latlng.lng.toPrecision(8); streetViewMarker = L.marker([lat, lon]).addTo(map) .bindPopup(`<a href="http://maps.google.com/maps?q=&layer=c&cbll=${lat},${lon}&cbp=11,0,0,0,0" target="blank"><b> Cliquer ici pour avoir un aperçu de la zone ! </b></a>`).openPopup(); }); </script> </body> </html> 一切都按预期进行，我不得不说我对渲染非常满意。然而，通过查看 Stackoverflow 上的不同主题，我发现可以通过单击地图来显示 Google 街景视图。这个功能真的很酷，但我想限制仅在我的公路旅行行程中添加街景标记的选项。 有人可以帮我吗？ 您通过创建挪威夏季公路旅行地图开始了学习 Leaflet 和 JavaScript 的旅程，真是太棒了。到目前为止，您的项目设置看起来不错，我很乐意在您的进展过程中提供指导或帮助。 既然您已经包含了 Leaflet、Slick Carousel 和 Leaflet Routing Machine 库，看来您正计划使用 Slick Carousel 创建一个带有路线的交互式地图，也许还有一些附加功能。 以下是一些增强您的项目的建议： 地图初始化： 使用初始视图和要显示的任何特定标记或图层设置您的传单地图。 路由功能： 利用 Leaflet Routing Machine 将动态路线添加到您的地图。您可以自定义路线、添加航点并提供逐向指示。 照片轮播： 既然您提到了公路旅行地图，请考虑集成 Slick Carousel 来展示旅途中关键地点的照片或描述。这可以为您的地图添加视觉上吸引人的元素。 地图控制： 探索 Leaflet 插件或内置控件以增强用户体验。例如，您可以添加缩放控件或比例尺。 响应式设计： 确保您的地图能够响应不同的设备。 Leaflet 通常适合移动设备，但如果需要的话进行测试和调整是一个很好的做法。 数据层： 如果您有与您的公路旅行相关的特定数据点或事件，您可以使用标记或其他视觉元素在地图上表示它们。 JavaScript 交互性： 使用 JavaScript 为地图添加交互性。对于 ㅤ 实例，当用户单击标记时，您可以创建包含附加信息的弹出窗口。 记得迭代测试你的项目，并参考每个库的文档以获取详细的使用说明。 如果您有具体问题或在此过程中遇到挑战，请随时提问。祝您的公路旅行地图项目好运！