0

このプラグインを選択したのは、マップ ポリライン上のマーカーをアニメーション化する最良の方法と思われるためです。

npm にないのでmodule.exports = L.animatedMarker、リポジトリから AnimatedMarker.js に追加して必要にしました。

App.js

<AnimatedMarkerElement 
  route={this.state.route} 
  map={this.refs.map.leafletElement}
/>

AnimatedMarkerElement.js

require('./AnimatedMarker')
import { MapComponent } from 'react-leaflet'
import L from 'leaflet'

export default class AnimatedMarkerElement extends MapComponent {

  componentWillReceiveProps(nextProps) {
    const line = L.polyline([nextProps.route.coordinates]),
      animatedMarker = L.animatedMarker(line.getLatLngs())

    nextProps.map.addLayer(animatedMarker)
  }

  render() {
    return null
  }
}

エラーは次のとおりです。

Uncaught TypeError: Cannot read property 'lat' of null

プラグインは、react 要素内に埋め込まれているために見つからないマップを探していると思います。

4

1 に答える 1

0 
const line = L.polyline([nextProps.route.coordinates]),

実際にあるはずです

const line = L.polyline(nextProps.route.coordinates),

配列内に配列をネストしていました。

于 2016-11-28T14:55:30.550 に答える