Bing 地图从外部调用信息框 table

Question

我左边有一张地图，右边有一张table。我想将鼠标悬停在 table 单元格上，它会在地图上弹出信息框。我可以使用地图鼠标悬停，但不知道如何从地图外部调用它。

我正在使用 MVC。

table 有 50 个左右的条目，地图有相应的图钉我想在 table 单元格或文本他的鼠标悬停时显示该图钉的信息框。

Answer 1

假设您已经拥有或可以为每个 pushpin/table 单元格对手动创建一些唯一 ID。然后在创建每个图钉后，您可以将此信息分配给它的元数据：

var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
pushpin.metadata = { id: "Some Id" };
// ......
// Other work like binding infobox and mouseover event

现在假设您最终将图钉添加到地图中，如下所示：

var pushpins = [....];
var layer = new Microsoft.Maps.Layer();
layer.add(pushpins);
map.layers.insert(layer);

并且在 table 端，将相同的 ID 绑定到 table 单元格的自定义数据属性：

<td data-pushpinId="Some Id">Cell A</td>

当您将鼠标悬停在 table 单元格上时，获取其 data-pushpinId 并在图层上找到相应的图钉，然后调用其鼠标悬停事件。

var pushpinId = tableCell.getAttribute("data-pushpinId");
var pushpin = layer.getPrimitives().find((pushpin) => pushpin.metadata.id === pushpinId);
pushpin && pushpin.mouseover.invoke();

Bing 地图从外部调用信息框 table

Bing Maps call infobox from outside table

asp.net-mvc

bing-maps