Question

我正在使用react开发一个传单应用程序。我的问题是每次路由重新安装传单地图时都不会渲染，除非重新加载页面。我假设因为绑定的div从DOM中删除然后重新添加。

我存储了地图对象，我想知道是否有办法将其设置为动态渲染到新的div元素而不重新加载页面。

这是组件类。

export default class Map extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    towerStore.addListener("added", this.handleAddedTower);
    towerStore.addListener("removed", this.handleRemovedTower);
    towerStore.addListener("updated", this.handleUpdatedTower);
    MapActions.createMap();
  }

  componentWillUnmount() {
    towerStore.removeListener("added", this.handleAddedTower);
    towerStore.removeListener("removed", this.handleRemovedTower);
    towerStore.removeListener("updated", this.handleUpdatedTower);
  }

  handleAddedTower = e => {
    MapActions.plotTower(e);
  };
  handleRemovedTower = e => {
    MapActions.removeTower(e);
  };
  handleUpdatedTower = e => {
    MapActions.updateTower(e);
  };

  render() {
    return (

      <div id="map-container">
        <div id="map" />
        <MapControls />
      </div>
    );
  }
}

这是createMap函数。

mapCreated = false;
exports.createMap = () => {
  if (!mapCreated) {
    console.log("creating map");

    map = L.map("map", {
      zoom: 10,
      // minZoom:10,
      // maxZoom:16,
      // zoomSnap: 2,
      center: [49.528528, -96.691092],
      zoomControl: false,
      attributionControl: false,
      doubleClickZoom: false,
      boxZoom: false
    });

    L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
      crossOrigin: true
    }).addTo(map);

    exports.goToLocation();

    mapCreated = true;
  }
};

Answer 1

对于寻找答案并且不了解传单插件的任何人，IvanSanchez有最好的解决方案，即使用此处http://leafletjs.com/plugins#frameworks中的React-Leaflet插件。

Leaflet：更改地图呈现为动态的div？

1 个答案: