2016-11-27 9 views
0

Я выбрал этот плагин, потому что он кажется лучшим способом анимировать маркер на полилинии карты., включающий плагин AnimatedMarker с рекламным листом

Это не на 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 

Я думаю, что плагин ищет карту, что она не может найти, потому что его зарыты внутри реагирующих элементов.

+0

Проверьте, возвращает ли строка.getLatLngs() что-то –

+0

Это возвращает массив объектов latlng. –

+0

Является ли плагин совместимым с вашим листом версии 0.7 или 1.0? –

ответ

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

на самом деле должно быть

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

Я вложенности массива внутри массива.