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

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

如果不起作用，请更改样式中“位置”的值

地图组件：无法读取未定义的属性“初始化”

2 个答案: