我的 map 有问题。一个 react-leaflet
map 。
它在我加载我的网站时显示。但其他方式,比如点击链接,它不会。
我只是在左上角加载图 block ,滚动时一张一张地加载。
以前有人遇到过这个问题吗?或者有人有想法吗?
一个例子 :
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>
);
}
这是我所在州的随 secret 钥。随意,像这样。
state = {
keyMAP: Math.random(),
};
希望它会帮助别人! :)
关于javascript - 重新加载 React Leaflet map 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54076757/