Проблема перезагрузить карту ReactLeaflet - PullRequest
Новая
       34

Проблема перезагрузить карту ReactLeaflet

0 голосов
/ 07 января 2019

У меня проблема с моей картой. Карта A 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 ... и ничего не получалось.

1 Ответ

0 голосов
/ 17 января 2019

Я разрешаю свою проблему. Я вставил ключ в мой рендер 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(),
};

Надеюсь, это поможет кому-то еще! :)

...