我尝试使用 fitBounds 使所有标记都以适当的缩放级别可见。getBounds(){return [[12.49637,41.90278],[12.319398,45.441906],[13.055054,47.809532],[16.373724,48.208244]]}<Mapstyle="mapbox://styles/mapbox/streets-v9"containerStyle=
2017-07-13
我正在使用 Mapboxgl 和 React 在我的网页上显示地图，但在设置 mapbox 的大小时遇到了很大的麻烦。我编写了自己的 css 类来至少显示地图，否则由于某种原因，它显示的高度为 0。我的自定义 css 类如下所示.custom-map {display: flex;width: 100%;height: 54em;}我还在我的项目中本地加载了mapboxgl css文件，完整文
我正在尝试将一个基本的 deck.gl（mapbox 静态地图）添加到一个 react 项目 - 我可以做到这一点；但是，一旦地图加载完成，它就会占据整个页面，任何其他信息都会隐藏在地图后面。例如，我在地图上方的<p>中有一些文本，但它应该显示在地图上方，但却隐藏在地图后面。尝试调整地图所在的 div 的大小均失败：margin-top、height 等。该类名为 DglMapclass DglM
我有一个 DeckGL 组件，我将它括在 div 标签中并指定其大小，但 deckGL 层似乎占据了整个视口。 这是我的代码片段。const INITIAL_VIEW_STATE = {longitude: 83.32247972488423,latitude: 17.714023254029464,zoom: 10,pitch: 0,bearing: 0}<div class="my-conta
2020-03-27
我试图让地图响应我的网站，因此我添加了 if 语句，但它不起作用，宽度只有在我手动编辑时才会改变。有人可以帮忙吗？我一直在尝试解决这个问题，但我只是不明白为什么它不起作用let phone = "320";let tablet = "900";let bigScreen = "2600";let bigLaptop = "1400";let laptop = "1000";function use
2020-09-14
我有一个 Mapbox GL JS 应用，我在地图上显示一些小部件。为了确保地图上的任何内容都不会被它们隐藏，我使用map.setPadding()添加了一些填充。它是不对称的（在我的情况下，左边大于右边）。它按预期适用于fitBounds和动画等，但我还需要设置地图的maxBounds，以便用户不会超出所需的视口。不幸的是，这不适用于自定义填充。当我绘制边界并使用showPadding时，我可以
2020-09-28
我有一张带有maxBounds属性设置的地图，该地图工作正常，但我们使用的是第三方的图块集，该图块集仅提供英国的整个地图，因此我想知道是否有可能将地图限制在其容器div中，以便不呈现的空白处对用户保持隐藏？这是我的设置：const [viewport, setViewport] = useState({latitude: 53.55,longitude: -2.39,width: '100%',h
2021-06-29
我的地图实例位于可调整大小的容器中，当我更改大小时，我应该调用 map.resize()。我想知道是否有办法监听 mapbox 容器调整大小事件，以便它可以触发 map.resize()？您能建议如何操作吗？export default function Map({ chartID, configuration, data }) {const classes = useStyles();const
2021-07-30
我希望在组件安装时能够缩放到边界。我知道这个原始 JS 代码可以实现缩放到边界，但不确定如何将其融入下面的 React 代码中（我认为需要 REF？）：var bounds = new mapboxgl.LngLatBounds();parkDate.features.forEach(function(feature) {bounds.extend(feature.geometry.coordin
使用map.fitBounds(bounds, {padding: 100})，可以在设置边界时添加填充，以确保您的标记（“边界”所基于的标记）都很好地显示在地图的可视部分内。我想在构造函数中实现相同的功能，其中可以像这样设置边界：var map = new mapboxgl.Map({container: 'MapPanel',style: 'mapbox://styles/mapbox/str
2022-03-31
我有一个 React.js 组件，它从 componentDidMount() 中的 API 调用中提取其初始状态数据。数据是一个对象数组。我能够使用 JSON.stringify 查看数组和各个元素（用于调试），但是当我尝试访问元素中的属性时，出现错误，似乎暗示该元素未定义，尽管已检查过它并非如此。代码：class TubeStatus extends Component {constructo
2017-04-09
运行此代码时，我在App.propTypes的第一行出现错误TypeError: Cannot read property 'array' of undefined代码： class App extends React.Component {render() {return (<div><h3>Array: {this.props.propArray}</h3><h3>Array: {this.
2017-10-13
我不知道此代码有何不同。类 a 是组件，示例是 example.jsimport React, {Component} from 'react';const styles = {border: {display: 'inline-block',height: '19px',padding: '1px 8px 0',border: '2px solid',borderRadius: '12px',l
在 API 请求后将船队的实时数据传递到表中之前，我想尝试注入样本数据，实际上我对它们进行了硬编码。目标是：如果我可以读取样本数据，那么 API 几乎肯定会将数据显示到我正在寻找的所有船只的表中。但是调试器提示ErrorTypeError - 无法正确读取未定义变量的属性，而Console提示：Response { type: "opaque", url: "", redirected: fals
2020-01-30
我有两个组件：类别和类别内容。类别是父组件。function handlePageSize(pageValue) {props.pageSize = pageValue;// React.cloneElement(element, pageSize = pageValue)}return (<Fragment><Meta name="description" content={metaDescri
2020-10-21