将AnimatedMarker插件与react-leaflet结合使用

Question

我选择了这个插件，因为它似乎是在地图折线上设置标记动画的最佳方式。

它不在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

我认为该插件正在寻找一个无法找到的地图，因为它埋藏在内部的反应元素中。

Answer 1

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

实际应该是

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

我在一个数组中嵌入一个数组。