-2

(L.MapMarker and L.ArcedPolyline)ライブラリを使用して反応コンポーネントにレイヤーを追加しようとするとLeaflet-Dvf、次のエラーが発生します。

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

リーフレット 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 を使用していませんが、あなたのインポート ステートメントに基づいて、潜在的な問題が 1 つあります。これにはすべてが含まれているため、dist ディレクトリから leaflet-dvf.js をインポートすることは理にかなっているでしょうか?

于 2017-01-05T13:30:18.353 に答える