3

ライブラリの react-leaflet を使用して、単純な Web アプリを作成しようとしています。

次のコードがあります。

import React from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class LeafletMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}
export default LeafletMap;

ただし、TileLayer は常にランダムな順序で表示されます。ComponentDidMount()で動作する必要がある多くのコードを読みましたがReactjs、私が見たレンダリングは、ライブラリと比較してまったく異なります。

私に何ができるか分かりますか？

4

1 に答える 1

6

機能しなかった唯一の理由は、次のコードを に追加する必要があるためですindex.html。

<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
<style type="text/css">
    .leaflet-container {
        height: 400px;
    }
</style>

それで全部です。

于 2016-07-21T22:08:48.363 に答える