Bing 地图 v8 - 缩小地图时，信息框不会出现在预期位置

Question

我正在尝试使用信息框作为工具提示。我希望信息框出现在鼠标悬停在上方的图钉上。

当地图充分放大时，此功能似乎可以正常工作。但是当地图缩小时 - 信息框有时会出现在视口之外（信息框的行为就像地图已被水平平移一样）。

我怀疑地图只是自我包裹，因为它几乎一直缩小。也许这意味着地图上有重复的坐标 canvas，尽管它们没有显示在视口中。

坐标在地图上只出现一次的图钉canvas在正确的位置显示信息框。

任何人都可以阐明这一点吗？感谢任何帮助。

我在下面包含了我的代码的基本版本。

var map;
function loadMapScenario() {
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'api key',
        maxZoom: 2,
        enableSearchLogo: false,
        disableBirdseye: true,
        showDashboard: false,
        showMapLabel: true,
        showScalebar: false,
        disablePanning: true,
        disableZooming: true,
        disableKeyboardInput: true,
        disableMouseInput: false,
        disableTouchInput: true,
        disableUserInput: false
    });

    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());

    var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title',
    description: 'description', showCloseButton: false });

    infoBox.setMap(map);

    for (var i = 0; i < pushpins.length; i++) {
        var pushpin = pushpins[i];

        Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) {
            infoBox.setLocation(e.target.getLocation());
        });
    }

    map.entities.push(pushpins);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Bing Maps Full Width</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    </head>
    <body>
        
        <div id='myMap' style='width: 100%; height: 500px;'></div>
        <script type='text/javascript' src='js/maps.js'></script>
        <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
    </body>
</html>

编辑

删除 TestDataGenerator 以支持硬编码坐标值会产生同样的问题。

See here.

更新的 JS：

map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'api key',
    maxZoom: 2,
    disableBirdseye: true,
    showDashboard: false,
    showMapLabel: true,
    showScalebar: false,
    disablePanning: true,
    disableZooming: true
});

var pushpins = [
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -79.08), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 108.51), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 95.03), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -134.58), null)
];

Answer 1

TestDataGenerator 和 "world-wrap" 在一直缩小时存在一个已知问题。请注意，并非所有 10 个图钉都显示在地图上。信息框显示在正确的位置，但未呈现图钉。

另外，查看您的地图选项，有一些是不需要的：

enableSearchLogo - V8 中没有搜索标志。
disableBirdseye - Birdseye 在 V8 中尚不可用。我们有一个新的经验和图像将在本财政年度晚些时候发布。当鸟瞰发布后，我们可能会公开此选项。你可以把这个留在您的代码，这样您以后就不必进行更改。
disableKeyboardInput/disableMouseInput/disableTouchInput/disableUserInput 未在 V8 中使用

Bing 地图 v8 - 缩小地图时，信息框不会出现在预期位置

Bing Maps v8 - Infobox does not appear in the expected location when the map is zoomed out

javascript

bing-maps