如何在必应地图中居中显示信息框？答案

【问题标题】：How do I center and show an infobox in bing maps?如何在必应地图中居中显示信息框？
【发布时间】：2010-12-17 11:16:03
【问题描述】：

我的代码先是 .pantolatlong，然后是 .showinfobox

信息框不会出现，除非我移除 pantolatlong。我想它正在阻止它。我尝试将它添加到 endpan 事件，但没有奏效。

平移到图钉并为其显示信息框的最简单方法是什么？

我使用的是 setcenter，但我发现有时 setcenter 平移，这会破坏它。

【问题讨论】：

标签： bing-maps infobox

【解决方案1】：

经过一番疯狂的谷歌搜索后，我想出了解决方案，我将在这里分享，希望其他人不会像我经历的那样悲伤。

我使用纯 javascript 创建并支持我的 bing 地图，没有 sdk 或 iframe 解决方案。在我的代码中，我生成了 javascript 以将我想要的所有引脚添加到地图中，并使用 asp.net 标签将其注入。

如果您在 Bing 地图上调用 setCenter() 方法，它应该会立即将地图设置为您指定的坐标。它确实......大多数时候。但有时，它会决定在点之间平移。如果你先做一个 SetCenter，然后再做一个 ShowInfoBox，它会很好用，除非它决定平移。

解决方案？作为优秀的程序员，我们深入研究 sdk，它揭示了我们可以挂钩的事件来处理这些问题。有一个 onendpan 事件，在平移完成后触发。还有一个onchangeview事件，在地图跳转时触发。

所以我们挂钩这些事件，并尝试显示我们的图钉形状的信息框......但没有任何反应。为什么不呢？

当事件被调用时，由于未知原因，您必须给它几毫秒的时间来喘口气。使用 10 毫秒的 setTimeout 似乎没问题。之后你的盒子会看起来很棒。

下一个问题是，您只希望它通过您用来使其在图钉之间轻弹的任何东西平移时出现（在我的例子中，是一个带有 onclick 方法的表格）。我动态创建/销毁事件处理程序，尽管还有其他选项，例如使用全局变量来跟踪用户是否正在平移，或者系统是否正在平移以响应点击。

最后，您遇到了一个由此而来的错误。如果您单击列表中的某个位置，并且它跳转/平移到该位置，则信息框将正常显示。如果用户将其关闭，然后再次单击列表项，则地图不会移动，因此不会触发任何事件。

我对此的解决方案是检测地图是否移动，方法是记录其经度/纬度，并使用另一种 setTimeout 方法，检测它们是否在 100 毫秒后发生变化。如果没有，请显示信息框。

您还需要跟踪其他事项，因为我看不到将参数传递给事件处理程序，因此我为此使用全局 javascript 变量 - 您必须知道您正在显示哪个图钉形状，并且跟踪之前的地图坐标，然后再检查它们是否发生了变化。

我花了一段时间才把所有这些拼凑起来，但它似乎奏效了。这是我的代码，删除了一些部分：

// An array of our pins to allow panning to them
var myPushPins = [];

// Used by the eventhandler
var eventPinIndex;
var oldMapCenter;

// Zoom in and center on a pin, then show its information box
function ShowPushPin(pinIndex) {
    eventPinIndex = pinIndex;
    oldMapCenter = map.GetCenter();
    map.AttachEvent("onendpan", EndPanHandler);
    map.AttachEvent("onchangeview", ChangeViewHandler);
    setTimeout("DetectNoMapChange();", 200);

    map.SetZoomLevel(9);
    map.SetCenter(myPushPins[pinIndex].GetPoints()[0]);

}


function EndPanHandler(e) {
    map.DetachEvent("onendpan", EndPanHandler);

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);

}

function ChangeViewHandler(e) {
    map.DetachEvent("onchangeview", ChangeViewHandler);

    setTimeout("map.ShowInfoBox(myPushPins[eventPinIndex]);", 10);

}

function DetectNoMapChange(centerofmap) {

    if (map.GetCenter().Latitude == oldMapCenter.Latitude && map.GetCenter().Longitude == oldMapCenter.Longitude) {
        map.ShowInfoBox(myPushPins[eventPinIndex]);
    }
}

【讨论】：

【解决方案2】：

这是另一种方式：

    function addPushpin(lat,lon,pinNumber) {
    var pinLocation = new Microsoft.Maps.Location(lat, lon);

    var pin = new Microsoft.Maps.Pushpin(map.getCenter(), { text: pinNumber.toString() });

    pinInfobox = new Microsoft.Maps.Infobox(pinLocation,
            { title: 'Details',
                description: 'Latitude: ' + lat.toString() + ' Longitude: ' + lon.toString(),
                offset: new Microsoft.Maps.Point(0, 15)
            });


    map.entities.push(pinInfobox);
    map.entities.push(pin);

    pin.setLocation(pinLocation);
    map.setView({ center: pinLocation});
}

【讨论】：