Question

我有一个表，我使用jQuery插件Tablesorter 2.0对其进行了排序。在同一页面上，我有一个Google地图，显示表格中每个项目的标记。现在，我希望这样做，以便在<tr>悬停时，Google地图上的相应标记会突出显示。我也希望反之亦然，点击标记会突出显示表格行。

我遇到的问题是我不知道如何将标记与表格行相关联。我可以使用（在Javascript中）获取每个项目的坐标和标记：

var list = [
    <% foreach (var item in Model) { %>
        new GMarker(new GLatLng(<%= item.Latitude %>, <%= item.Longitude %>)),
    <% } %> ];

这很好，但我不知道如何将这个标记数组与表行相关联，考虑到可以对行进行排序。任何正确方向的帮助都会受到赞赏，因为我现在很难过。

Answer 1

我建议您先将标记推入全局数组，以便按编号引用它们。在排序之前，将引用标记的代码放在表中。也许像是

  var n=gmarkers.length - 1;

  onclick='GEvent.trigger(gmarkers[' +n+ '],"click")'

数组以及您在表中提到的任何其他变量或函数都需要是全局的，因为从表中的HTML启动的JavaScript在全局上下文中执行。

您几乎肯定需要使用createMarker（）函数将Function Closure保存在与标记关联的变量上，以便在将它们与表条目相关联后对标记执行任何有用的操作。

Answer 2

我建议您在创建每个标记的同时创建每一行。

在循环的每次迭代中，为该标记/行生成一个id。将id添加到行中，并使用代码向标记添加GEvent侦听器以突出显示相同id的行。将标记添加到索引为id的数组中。

您可以为行鼠标悬停添加一个侦听器，该侦听器获取行ID，您可以使用该侦听器从阵列中访问相关标记。

如果我以后有时间，我会看看能不能提出一些代码。

Answer 3

查看this样本。

这是您订阅客户端活动的方式。

@(
    Html.Googlemap()
        .Name("map")
        .Markers(m => m.Add()
                       .Id("marker-1")
                       .Title("Hello World!"))
        .ClientEvents(events => events.OnMapLoaded("onMapLoadHandler")) 
 )

<ul class="marker-list">
    <li data-id="marker-1">My Marker</li>
</ul>

这就是触发地图点击的方法。

<script type="text/javascript">
        var markers = {};
        function onMapLoadHandler(args) {
            markers = args.markers;
        }
        $(".marker-list li").click(function () {
            var id = $(this).attr('data-id');
            google.maps.event.trigger(markers[id], 'click');
        });
</script>

如何在Google地图中悬停标记以显示可排序的表格？

3 个答案: