Обновление Яндекс-карты после изменения координат метки
Проект на react. Версия АПИ 2.1.79.
Здравствуйте!
Есть задача осуществлять мониторинг передвижения транспорта, отображая машины на карте с помощью меток.
Координаты приходят с сервера и пробрасываются в компонент карты с помощью props.
Объекты управляются через objectManager.
Я удаляю объект из списка, а затем добавляю его снова с обновлёнными координатами.
objectManager.remove([objectId]);
objectManager.add(objectWithNewCoords);
При таком способе положение меток на карте не обновляется, только если изменить zoom или подвигать карту мышкой -- в общем, совершить какое-нибудь действие.
Чтобы позиции менялись самостоятельно, приходится использовать setTimeout.
objectManager.remove([mapUnitTrace.id]);
setTimeout(() => objectManager.add(objectWithNewCoords), 50);
Подскажите, пожалуйста, как обновить позицию метки после смены её координат? Спасибо!
Компонент карты
const initOptions = {
center: [],
zoom: YaMapData.INIT_ZOOM,
};
function YaMap({ placemarks, mapUnitTrace }: IYandexMapProps) {
const [yandexMap, setYandexMap] = useState(null);
const [objectManager, setObjectManager] = useState(null);
const initYandexMapAndObjectManager = () => {
setYandexMap(new ymaps.Map(YaMapData.MAP_ID, initOptions));
setObjectManager(new ymaps.ObjectManager());
};
useEffect(() => {
if (yandexMap && objectManager) {
yandexMap.geoObjects.add(objectManager);
}
}, [objectManager]);
const loadAndAddYandexMapToGlobalScope = async (init) => {
if (!window.ymaps) {
await createAndLoadScript(YaMapData.API_SRC);
}
ymaps.ready(init);
};
useEffect(() => {
loadAndAddYandexMapToGlobalScope(initYandexMapAndObjectManager);
}, []);
useEffect(() => {
if (window.ymaps) {
objectManager.add(placemarks);
yandexMap.setBounds(objectManager.getBounds());
}
}, [placemarks]);
useEffect(() => {
if (mapUnitTrace.id && placemarks) {
const r = {
type: 'Feature',
id: mapUnitTrace.id,
geometry: {
type: 'Point',
coordinates: mapUnitTrace.geometry,
},
properties: {
hintContent: 'Содержание всплывающей подсказки',
balloonContent: 'Содержание балуна',
},
};
objectManager.remove([mapUnitTrace.id]);
setTimeout(() => objectManager.add(r), 50);
}
}, [mapUnitTrace]);
return (
<div className={styles.yandexMapWrapper}>
<div
id={YaMapData.MAP_ID}
className={styles.yandexMap}
/>
</div>
);
}
export default YaMap;
Ответы (1 шт):
Просто нужно штатно менять координаты метки.
let marker = objectManager.objects.getById(mapUnitTrace.id);
marker.geometry.setCoordinates(newCoordinates);