- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 Heroku 上部署了一个全栈 React.js 应用程序。除了 Mapbox,一切都部署得很好。在开发中,一切正常。一旦我在 Heroku 中打开我的应用程序,Mapbox 就会显示一个黑屏。
我在 Heroku 中为默认的公共(public) Mapbox token 添加了配置变量。
当我在生产中检查控制台时,我收到一条错误消息“未捕获的 ReferenceError:y 未定义”
我正在将 Mapbox 与 React Map GL 一起使用,但不确定是什么问题,目前正在寻求帮助。
我添加了它在开发中的外观和我在生产中得到的黑屏的屏幕截图。 production-mapbox-error development-mapbox-working
我的客户端 package.json:
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.8",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"framer-motion": "^3.2.1",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.14.1",
"react-map-gl": "^6.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080"
}
我的 ReactMapGL 组件:
import ReactMapGL, { Marker, Popup } from "react-map-gl";
import { listLogEntries } from "./api";
import MapPin from "../../assets/icons/map-pin1.svg";
import MapPinRed from "../../assets/icons/map-pin-red1.svg";
import LogEntryForm from "../LogEntryForm/logEntryForm";
import "./reactMap.scss";
const ReactMap = () => {
const [logEntries, setLogEntries] = useState([]);
const [showPopup, setShowPopup] = useState({});
const [addEntryLocation, setAddEntryLocation] = useState(null);
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 49.246292,
longitude: -123.116226,
zoom: 8,
});
const getEntries = async () => {
const logEntries = await listLogEntries();
setLogEntries(logEntries);
};
useEffect(() => {
getEntries();
}, []);
const showAddMarkerPopup = (event) => {
const [longitude, latitude] = event.lngLat;
setAddEntryLocation({
longitude,
latitude,
});
};
const MAP = process.env.REACT_APP_MAPBOX_TOKEN;
const MAP_STYLE = process.env.REACT_APP_MAP_STYLE;
return (
<div className="map">
<ReactMapGL
className="map__react-gl"
{...viewport}
// Setting map theme from mapbox
mapStyle={MAP_STYLE}
// mapbox Api Access Token
mapboxApiAccessToken={MAP}
onViewportChange={setViewport}
onDblClick={showAddMarkerPopup}
>
{logEntries.map((entry) => (
<div key={entry._id}>
<Marker latitude={entry.latitude} longitude={entry.longitude}>
<div
onClick={() =>
setShowPopup({
[entry._id]: true,
})
}
>
<img
className="map__pin"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPin}
alt="Map Pin"
/>
</div>
</Marker>
{showPopup[entry._id] ? (
<Popup
className="map__popup"
latitude={entry.latitude}
longitude={entry.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setShowPopup({})}
anchor="top"
>
<div className="map__info-container">
<h3 className="map__info-heading">{entry.title}</h3>
<hr className="map__hr" />
<p className="map__info-description">{entry.description}</p>
<hr className="map__hr" />
<p className="map__info-comment">{entry.comments}</p>
<div className="map__info-image-container">
{entry.image && (
<img
className="map__image"
src={entry.image}
alt={entry.title}
/>
)}
</div>
<small className="map__info-visited">
Visited on: {new Date(entry.visitDate).toLocaleDateString()}
</small>
</div>
</Popup>
) : null}
</div>
))}
{addEntryLocation ? (
<div>
<Marker
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
>
<div>
<img
className="map__pin-red"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPinRed}
alt="Map Pin"
/>
</div>
</Marker>
<Popup
className="map__popup"
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setAddEntryLocation(null)}
anchor="top"
>
<div className="map__new-info-container">
<LogEntryForm
onClose={() => {
setAddEntryLocation(null);
getEntries();
}}
location={addEntryLocation}
/>
<form action=""></form>
</div>
</Popup>
</div>
) : null}
</ReactMapGL>
</div>
);
};
export default ReactMap;
最佳答案
这是 Webpack 的问题。对于任何 future 的观众,这对我有用:
import ReactMapGL, {Marker} from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
另外,请记住 npm install worker-loader。
关于javascript - 控制台中的 Mapbox 生产错误。 "Uncaught ReferenceError: y is not defined",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65802002/
我需要检查在我的 RCP 应用程序中启动时是否加载了某些包。我知道有一个“主机 OSGi 控制台”可以显示 Eclipse IDE 中所有插件的状态,但我对这些不感兴趣。 我执行了以下步骤来获取我的应
在 pdb/ipdb 调试中,有用的 interact 命令为我提供了一个功能齐全的交互式 Python 控制台。 但是,这似乎始终是“标准”Python 控制台,即使我使用 ipdb 开始也是如此。
按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我搜索过但找不到答案:如何在运行 Emacs 时选择:文件、编辑、选项、缓冲区、工具、C++ 等下拉菜单在控制台模式下?不是终端菜单。 不,F10 不是答案。 最佳答案 如果不是 F10,那么 M-x
我正在制作一个每 20-40 秒截屏一次的 c# 控制台应用程序。 我试过到处找,但所有其他示例都没有使用控制台 这是我到目前为止所做的代码: using System; using System.D
尝试使用 terraform 控制台,新功能。 我使用 tfstate 进入我的项目并运行“terraform 控制台”。 我可以使用常规插值系统获取变量值、数据和资源。但是,模块很难破解,我无法正确
我正在尝试调试一段返回错误的 SQL。我不确定 django 或 mysql 是否处理错误,所以我想通过 django 控制台运行它。 有办法设置吗? 提前致谢。 最佳答案 manage.py dbs
你好是否可以在 JPanel 中绘制 java 控制台返回的内容?你有教程可以遵循吗?谢谢开关 最佳答案 我不记得在哪里找到这个,但我已使用我称为 TextAreaOutputStream 的类将输出
我对 Xcode 甚至编程都有点陌生。 在 Xcode 中,在我的代码中,如何显示控制台并清除屏幕? 我知道我可以使用 Xcode 首选项来完成此操作,但我想以编程方式完成此操作。 最佳答案 这对我有
我正在开发一个 C# 项目,我需要从没有 API 或 Web 服务的安全网站获取数据。我的计划是登录,访问我需要的页面,并解析 HTML 以获取记录到数据库所需的数据位。现在我正在使用控制台应用程序进
我是编程新手,正在尝试不同的在线事件以掌握它。我遇到了一个特定的问题,我想制作一个程序,用户输入一个值并打印一个特定的字符串。例如,当用户输入 0 时,将打印字符串“black”,输入 1 将打印字符
我想创建一个终端/控制台,用户可以在其中输入命令。我知道 java,但我是 xml 的新手,所以我想知道如何在文本下生成文本,如果它变得很长,它应该是可滚动的,这是一张图片: 这是我的 xml cpd
我有一个由随机生成的数字组成的 nxn 网格。我有一个标签显示 X 轴和 Y 轴的元素编号: 对于单个数字,它可以正确对齐,但是当网格大小增加时,标签会变得不成比例并且不会像这样对齐: 我想知道是否有
假设我创建了一个包含两个变量的结构。 struct mystruct{ public: string name; int age;}; class School :public mystruct{ p
我正在重写一个服务器程序,我想在其中添加一个简单的控制台输入。 目前,它只是提供数据并为它所做的每一件事打印出一两行,作为任何观看/调试的人的描述性措施。 我想要的是有一个始终位于底部的“粘性”输入栏
我必须编写启动另一个进程(GUI)的控制台应用程序。然后,使用其他应用程序或相同的选项,我必须能够停止子进程。此外,如果子进程从 GUI 关闭,则必须通知我执行最终任务(如果被杀死,则相同)。 我认为
我一直在尝试到处寻找以下问题的答案: Linux上的标准输出/控制台默认将内容保存到文件中吗? 我不想保存内容或重定向输出(我已经知道这一点),我只是想知道它是否已经通过 linux 中包含的某个默认
我正在尝试不同的事件,因为我是初学者并且想了解更多。我正在尝试在我的代码所在的同一行打印一个图案: int main() { int numOfWiggles; int count;
在我的一项小任务中,我被要求创建一个数组来存储从用户提供的输入中获取的姓名和地址,并且稍后能够从数组中删除姓名和地址。 如果能帮助我理解如何实现这一目标,我们将不胜感激,谢谢。 编辑 - 该数组将像地
如果您想在 Python shell 中查看特定模块中定义了哪些模块,一种选择是键入 dir(path.to.module)。不幸的是,这不仅列出了特定模块中定义的类或函数,还包括该模块导入的类或函数
我是一名优秀的程序员,十分优秀!