是否有 MapKit JS 事件来检测地图何时完成加载？

Question

是否有 MapKit JS 事件来检测地图何时完成加载？

文档没有说明这是如何实现的。有没有人有不涉及 setTimeout 的解决方法？ https://developer.apple.com/documentation/mapkitjs

我需要这样做，这样我就可以在地图加载完成后在地图上触发注释。我已经能够使用 setTimout 方法实现此目的，但是有时地图在操作触发之前未完成加载。

Answer 1

所以在我得到一个书面的答案之前，我将与你分享我的案例解决方案。我需要加载带有图像注释的地图，在加载地图和图钉后，我希望显示注释（弹出窗口）。这就是我实现它的方式。

您会注意到，当您的 Apple Map 加载并将图像注释添加到地图时，它会为图像注释的大小生成特定的样式。因此，在我触发我的函数以使注释出现之前，我等待该类出现在页面上。

function handleImageAnnotationLoaded() {
    console.log('Image annotation has been loaded');
    map.selectedAnnotation = landmarkToShowCallout;
}

// Define the MutationObserver callback function
function observerCallback(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
            for (const node of mutation.addedNodes) {
                if (
                    node.nodeType === Node.ELEMENT_NODE &&
                    node.tagName === 'DIV' &&
                    node.style.width === '49.5px' &&
                    node.style.height === '61.5px'
                ) {
                    handleImageAnnotationLoaded();
                    observer.disconnect(); // Disconnect the observer when the annotation is found
                    break;
                }
            }
        }
    }
}

// Create a MutationObserver instance and configure it with the callback function
const observer = new MutationObserver(observerCallback);

// Start observing the map element for changes
observer.observe(document.getElementById('map'), {
    childList: true,
    subtree: true,
});

不是最优雅的解决方案，但我敢于发布另一个对他们有用的工作示例:)