-2

当我尝试使用库(L.MapMarker and L.ArcedPolyline)在反应组件中添加层时，出现以下错误：Leaflet-Dvf

Uncaught TypeError: Cannot read property 'call' of undefined(…)

Leaflet-dvf 参考：https ://github.com/humangeo/leaflet-dvf

尝试了所有可能的依赖项，但仍然出现相同的错误。纯 html 中的相同代码工作正常，错误仅出现在 React 组件中。

下面是代码：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import '../../../node_modules/leaflet-dvf/dist/css/dvf.css';
    import stylingMap from "../scss/decisionmaking.scss";
    import { Map, Marker,Path } from 'leaflet-dvf';
    import '../../../node_modules/leaflet-polylinedecorator/leaflet.polylineDecorator.js';
    import '../../../node_modules/leaflet-dvf/src/leaflet.dvf.markers.js';
    const Decision = React.createClass({    
        componentDidMount() {
            this.map();
        },

        map() {
            var map = L.map('map').setView([2, 20], 2);    
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">'
            }).addTo(map);    
        var marker = new L.MapMarker(new L.LatLng(20.593684, 78.96288), {
          radius: 10,

        });
        map.addLayer(marker);
var arcedPolyline = new L.ArcedPolyline([[20.593684, 78.96288],[37.09024,-95.712891]],{
          distanceToHeight: new L.LinearFunction([0, 5], [800, 200]),
          color: 'blue',
          weight: 2
      });
      map.addLayer(arcedPolyline);
            render: function() {
                return (
                    <div className="decisionmaking">
                    <div id='map' style={{height:500+"px", width:900+"px"}}></div>
                    </div>
            );
        }
        });
        module.exports = Decision;

错误截图： 在此处输入图像描述

在此处输入图像描述

4

1 回答 1

0

我没有使用过 React，但根据您的导入语句，我可以看到一个潜在的问题：L.ArcedPolyline 是在 leaflet.dvf.lines.js 中定义的，而不是在 leaflet.dvf.markers.js 中定义的。从 dist 目录导入 leaflet-dvf.js 可能有意义，因为它包含所有内容？

于 2017-01-05T13:30:18.353 回答