javascript - 将 AnimatedMarker 插件与 react-leaflet 结合

Question

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

它不在 npm 上，所以我只是module.exports = L.animatedMarker从存储库中添加到 AnimatedMarker.js 并需要它。

应用程序.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),

我在数组中嵌套了一个数组。