javascript - Bing map 信息框鼠标悬停事件问题 : When using async call to change htmlContent

Question

希望有人能帮忙。

我正在使用 Bing map (v8 - 最新版本)，但是当我创建自定义信息框并使用异步请求填充内容时，无论是 setTimeout/ajax - 即使鼠标光标处于(看似)在信息框窗口的边界内。即使当我对信息框进行小的额外更改(DOM)时，鼠标移出也会触发，所以它不像信息框以任何方式删除然后刷新..除非 M$ 做了一些奇怪的事情!

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'My Bing Maps Key',
    center: new Microsoft.Maps.Location(47.60357, -122.32945)
});

var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(2, map.getBounds());
var infobox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { 
htmlContent: '<div style="height: 200px; width: 200px; background-color: #fff">{content}</div>', visible: false });

infobox.setMap(map);
for (var i = 0; i < pushpins.length; i++) {
    var pushpin = pushpins[i];
    Microsoft.Maps.Events.addHandler(pushpin, 'mouseover', openInfoboxForPin);
    Microsoft.Maps.Events.addHandler(pushpin, 'mouseout', closeInfobox);
}
map.entities.push(pushpins);

function openInfoboxForPin(e) {
    //Make sure the infobox has metadata to display.
    if (e.target) {
        //Set the infobox options with the metadata of the pushpin.
        infobox.setOptions({
            location: e.target.getLocation(),
            visible: true,
        });

        setTimeout(function() {
            infobox.setOptions({ htmlContent: pushpinFrameHTML.replace('{content}',html) });
        }, 400);
    }
}

function closeInfobox() {
    infobox.setOptions({ visible: false });
}

JSFIDDLE:Fiddle example here

请帮忙。谢谢

Answer 1

我已在所有受支持的浏览器中尝试了您的代码，它按预期 100% 运行。当信息框出现在图钉和信息框之间时，应该触发鼠标事件，从而引发鼠标移出事件。