我不明白如何使用react-leaflet正确更新我的标记。参考以下示例:
import React from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import { Map, Marker, TileLayer } from 'react-leaflet';
const map = props => (
<Map center={[51.505, -0.09]} zoom={13}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
/>
{props.markers.map(m => (
<Marker position={m.position} />
))}
</Map>
);
const mapStateToProps = state => ({
markers: state.markers // array of objects with positions. this can change
});
render(connect(mapStateToProps)(map), document.getElementById('map-container'));
这个方法能够工作,但我不确定是否是正确的方法。因为在这种情况下,当标记更新它们的位置(或者有更多的标记)时,Leaflet会删除标记并放置新的标记,而不是更新原始标记的位置。
所以我的问题是,我这样做对吗?或者还有更高效的方式吗?
谢谢!