Question

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

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

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

在地图画布上只显示一次坐标的图钉会在正确的位置显示信息框。

有人可以对此有所了解吗？任何帮助表示赞赏。

我在下面提供了我的代码的基本版本。

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

There is a known issue with the TestDataGenerator and "world-wrap" when zoomed out all the way. Notice that not all 10 pushpins are displayed on the map. The infobox is being displayed in the correct position, but the pushpin isn't being rendered.

Also, looking through your map options there are a few that aren't needed:

enableSearchLogo - There is no search logo in V8.
disableBirdseye - Birdseye is not yet available in V8. We have a new experience and imagery coming later this fiscal year. When birdseye is released we will likely expose this option. You can leave this in your code so you don't have to make changes later.
disableKeyboardInput/disableMouseInput/disableTouchInput/disableUserInput not used in V8

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

1 个答案: