1

我正在尝试在传单地图上显示两点之间的路线。为此，我正在使用传单路由机。但是我将地图对象传递给传单路由组件时遇到问题。

map_container.js

...
        return (
            <Map ref='map' center={position} zoom={this.state.zoom}>
                <TileLayer
                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <Routing map={this.refs.map} from={[51.599684, 15.27539]} to={[51.602292, 15.295128]} />
            </Map>
        )
...

路由.js

import {MapLayer} from 'react-leaflet';
import L from 'leaflet';
import 'leaflet-routing-machine';

export default class RoutingMachine extends MapLayer {
    componentWillMount() {
        super.componentWillMount();
        this.leafletElement.addTo(this.props.map);
    }

    render() {
        return null;
    }

    createLeafletElement (props) {
        const {from, to} = this.props;
        console.log(this.props)
        var leafletElement = L.Routing.control({
            waypoints: [
                L.latLng(from[0], from[1]),
                L.latLng(to[0], to[1]),
            ],
        });
        return leafletElement;
    }
}

我得到的错误：

{map: undefined, from: Array(2), to: Array(2)}

bundle.js:69506 Uncaught TypeError: Cannot read property 'getSize' of undefined
    at NewClass.onAdd (bundle.js:69506)
    at NewClass.onAdd (bundle.js:68679)
    at NewClass.addTo (bundle.js:26718)

但最有趣的是 -在 "react-leaflet": "1.1.0" 版本上一切都可以完美运行，但在 1.1.1 及更高版本上它会中断。

有任何想法吗？

4

1 回答 1

1

好的，一段时间后我找到了解决方案。无法读取未定义错误的属性“getSize”是由仅在整个模块加载后传递给 refs 的映射引起的。它可以通过添加来修复：

return ( this.map ? 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
          <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                   by={this.props.busstops}/>  
        </Map> 
        : 
        <Map onClick={(e) => this._mapClickEvent(e)} className="main-screen-map-container" center={position} 
             zoom={this.state.zoom} ref={map => this.map = map}> 

          <TileLayer 
              attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors" 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
          /> 
        </Map>

它检查地图是否已经定义，然后用道路重新渲染它。根据您的其余代码（如果您使用 Redux 获取一些数据并设置强制更新的状态），可能还需要添加以下代码：

 componentDidMount() { 
    console.log("map did mount " + this.map); 
    this.forceUpdate() 
  }

那应该解决它。PS 三元运算符也可以通过删除冗余代码并添加

 _addRouting() {
    if (this.map) {
      return (
          <div>
            <Routing map={this._getMap()} from={[11.11, 12.12]} to={[11.11, 12.12]}
                     by={this.props.busstops}/>
          </div>
      )
    }
  }

然后在渲染方法中注入它。

仍然不知道为什么在旧版本的 react-leaflet 上没有出现这个问题。

于 2017-12-23T11:22:01.313 回答