javascript - 重新加载 ReactLeaflet 地图的问题
问题描述
我的地图有问题。一张react-leaflet
地图。它在我加载我的网站时显示。但其他方式,比如点击链接,它不会。我只是在左上角加载图块,滚动时一张一张地加载。
以前有人遇到过这个问题吗?或者有人有想法吗?
一个例子: http ://www.noelshack.com/2019-02-1-1546872914-capture.png
import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './local_leaflet.css';
const mapState = {
lat: 49.4431,
lng: 1.0993,
zoom: 10,
visible: true,
url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
};
export default () => (
<div>
<Map center={[mapState.lat, mapState.lng]} zoom={mapState.zoom}>
<TileLayer url={mapState.url} />
</Map>
</div>
);
我已经尝试过componentDidMount
, componentDidUpdate
, componentWillUnmount
... 但没有任何效果。
解决方案
我解决了我的问题。我在我的 MAP 渲染中放了一个键,如下所示:
render ()
{
return (
<div>
<Map key={this.state.keyMAP} center={[this.mapState.lat, this.mapState.lng]} zoom={this.mapState.zoom}>
<TileLayer url={this.mapState.url} />
</Map>
</div>
);
}
这是我所在州的随机密钥。随意,像这样。
state = {
keyMAP: Math.random(),
};
希望它会帮助别人!:)
推荐阅读
- python - 具有分组要素图层控制的时间戳 geojson
- javascript - 像vue js一样,我想用react js作为一个js来为管理员和用户显示屏幕
- html - 新手引导。一旦导航栏折叠到汉堡菜单 - 导航链接不会在单击汉堡图标时下拉
- perl - perl pdf::api2 检查 pdf 文件是否被加密
- service - 无法访问服务器:pgAdmin 4
- python - 如何根据多个条件使用前一行填充熊猫数据框列的行?
- sql - Sql 查询仅从具有多个条件的 where 子句返回匹配的列
- r - 为什么我在 R 中运行 Leiden 算法时得到“假社区”?
- python - PyQt5 .ui 文件未加载
- powerbi - 在 Power BI 中使用 DAX 计算运行平均值