地图组件：无法读取未定义的属性 'initialize'

Question

我正在尝试使用 react-leaflet.js 制作基本地图。这是我的代码：

import React from 'react';
import { Map } from 'leaflet';

const mapStyle = {
  height: '400px'
};

const mapCenter = [0, -0];
const zoomLevel = 3;

export default class MapT extends React.PureComponent {
  render() {
    return (
      <div>
        <Map
          style={mapStyle}
          center={mapCenter}
          zoom={zoomLevel}
        >
        </Map>
      </div>
    );
  }
}

但是我收到一个错误：

Uncaught TypeError: Cannot read property 'initialize' of undefined
    at NewClass (leaflet-src.js:300)
    at mountIndeterminateComponent (react-dom.development.js:14003)
    at beginWork (react-dom.development.js:14470)
    at performUnitOfWork (react-dom.development.js:17014)
    at workLoop (react-dom.development.js:17054)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:16366)
    at renderRoot (react-dom.development.js:17148)
    at performWorkOnRoot (react-dom.development.js:17993)
    at performWork (react-dom.development.js:17901)
    at performSyncWork (react-dom.development.js:17873)
    at requestWork (react-dom.development.js:17761)
    at scheduleWork (react-dom.development.js:17566)
    at Object.enqueueSetState (react-dom.development.js:11695)

我做错了什么？

Answer 1

您需要从 react-leaflet 而不是 leaflet.

导入 React 传单组件

import { Map } from 'react-leaflet';

Answer 2

抱歉来晚了。在上面的例子中没有宽度值。如果有人遇到同样的问题，请确保在地图组件上设置了高度和宽度。例如：

如果不起作用，请更改 "position" 样式中的值

地图组件：无法读取未定义的属性 'initialize'

Map component: Cannot read property 'initialize' of undefined

reactjs

react-leaflet

地图组件：无法读取未定义的 属性 'initialize'

Map component: Cannot read property 'initialize' of undefined

reactjs

react-leaflet

地图组件：无法读取未定义的属性 'initialize'