Попытка добавить маркеры для карты Trimble в React с JavaScript SDK, но маркеры сдвигаются с карты, а не при введенном L ⇐ Javascript

[Anonymous]

Я пытаюсь использовать карты Trimble JavaScript SDK в приложении React, чтобы отобразить карту. Я также хочу добавить точки на карту в указанных LAT Longs. Однако всякий раз, когда я добавляю маркер к карте, маркер, кажется, снимает карту и не показывается на LAT/Long. Когда вы увеличиваете или выходите, маркер выглядит так, как будто он движется. Таким образом, эта проблема только с маркерами. Я просто не могу понять, почему маркер меняется. Я скопировал это из примеров на портале разработчика Trimble, поэтому я не уверен, что я делаю не так. Я скажу, что примеры на Trimble - это просто JavaScript, и я делаю это в React, поэтому я не уверен, что это имеет значение или нет. < /P>

Код: Выделить всё

import React, { useEffect } from 'react';
import './TrimbleTestPage.css';
import TrimbleMaps from "@trimblemaps/trimblemaps-js";

TrimbleMaps.setAPIKey("API KEY");

export default function TrimbleTestPage() {

useEffect(() => {
const center = [-87, 38];
const zoomLevel = 6;
const map = new TrimbleMaps.Map({
container: 'map', // container id
center: center,
zoom: zoomLevel,
maxCanvasSize: [500,1000],
region: TrimbleMaps.Common.Region.NA
});

map.on('load', () => {
// Create a marker with a label on top of an icon
const el = document.createElement('div');
el.classList.add('cust-marker');
el.title = 'Marker with a label and an icon';
const htmlContent =
'Green truck' +
'';
el.innerHTML = htmlContent;
const marker = new TrimbleMaps.Marker({
draggable: false,
anchor: 'top-left', // default: center, if width is too wide, you will see marker moves after zoom out.
element: el
}).setLngLat(center).addTo(map);
});

// Cleanup function to remove the map instance when the component unmounts
return () => map.remove();
}, []);

return (



)
}

Вот как выглядит карта с маркером, когда она рендеринга:


Подробнее здесь: https://stackoverflow.com/questions/795 ... markers-ar