Question

我确实按照https://github.com/tumerorkun/react-leaflet-zoom-indicator中的说明安装了插件，但是在使用此代码时遇到此错误

import { ReactLeafletZoomIndicator } from 'react-leaflet-zoom-indicator'

<Map
    map={this.refs.mapRef}
    center={[51,10]}
    length={4}
    onClick={(e)=>{this.handleClick(e)}}
    ref="mapRef"
    zoom={5.5}
>
    <ReactLeafletZoomIndicator head='zoom:' position='topleft' />
    <TileLayer
          /*Links for background map*/
    />
          {newLocation}
          {existingLocations}
</Map>

此行失败

    _this.map = context.map || _this.props.leaflet.map;

在node_modules中的react-leaflet-zoom-indicator.js中

Answer 1

似乎ReactLeafletZoomIndicator没有设置上下文，因此属性映射未定义。试试这个：

import { ReactLeafletZoomIndicator } from 'react-leaflet-zoom-indicator'

const ReactLeafletZoomIndicatorWithContext =  = withLeaflet(ReactLeafletZoomIndicator);

<Map
    map={this.refs.mapRef}
    center={[51,10]}
    length={4}
    onClick={(e)=>{this.handleClick(e)}}
    ref="mapRef"
    zoom={5.5}
>
    <ReactLeafletZoomIndicatorWithContext head='zoom:' position='topleft' />
    <TileLayer
          /*Links for background map*/
    />
          {newLocation}
          {existingLocations}
</Map>

react-leaflet的

v2需要这个。参见here。

通过使用withLeaflet（）包装您的自定义组件，它将获得在其属性中注入的Leaflet上下文对象。

无法在新的ZoomIndicator上读取未定义的属性“地图”

1 个答案: