我有一个使用 jQuery 插件 Tablesorter 2.0 可排序的表。在同一页面上，我有一个谷歌地图，它为表格中的每个项目显示一个标记。现在，我想让它在悬停<tr> 时，突出显示谷歌地图上的相应标记。我也想反之亦然，点击标记将突出显示表格行。
我遇到的问题是我不知道如何将标记与表格行相关联。我可以使用（在 Javascript 中）获取每个项目的坐标和标记：
var list = [
<% foreach (var item in Model) { %>
new GMarker(new GLatLng(<%= item.Latitude %>, <%= item.Longitude %>)),
<% } %> ];
这很好用，但考虑到行可以排序，我不知道如何将这个标记数组与表行关联起来。任何正确方向的帮助都将不胜感激，因为我现在很困惑。
【问题讨论】：
标签： jquery asp.net-mvc google-maps
我建议你先把你的标记推入一个全局数组中，这样你就可以通过编号来引用它们。在对表格进行排序之前，将引用标记的代码放在表格中。也许像
var n=gmarkers.length - 1;
onclick='GEvent.trigger(gmarkers[' +n+ '],"click")'
数组以及您在表格中提到的任何其他变量或函数都需要是全局的，因为 JavaScript 从表格中的 HTML 启动在全局上下文中执行。
您几乎肯定需要使用 createMarker() 函数来保存与标记关联的变量的函数闭包，以便在将标记与表条目关联后对标记执行任何有用的操作。
【讨论】：
我建议在创建每个标记的同时创建每一行。
在循环的每次迭代中，为该标记/行生成一个 id。将 id 添加到行中，并使用代码将 GEvent 侦听器添加到标记以突出显示相同 id 的行。将标记添加到具有 id 索引的数组中。
您可以为获取行 id 的行 mouseover 添加一个侦听器，您可以使用它来访问数组中的相关标记。
如果我以后有时间，我会看看我是否能想出一些代码。
【讨论】：
看看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>
【讨论】：
Rails 5.2 Ruby 2.6.6
我制作了地图上所有标记的全局数组：
allMarkers = []
var marker, i;
var count = 1
for (i = 0; i < whatever.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(whatever[i][0], whatever[i][1]),
map: map,
id: "marker-" + count,
});
allMarkers["marker-" + count] = marker;
var count = count + 1
表格由 tbody 的 id 和每行的标记组成：
<tbody id="markerlist">
<%i = 1%>
<% @whatever.each do |this| %>
<tr dataid="marker-<%=i%>">
<td></td>
</tr>
<%i += 1%>
<% end %>
</tbody>
然后是一些 javascript 来抓取表格，在悬停时获取标记 ID，然后单击相应的地图标记：
<script type="text/javascript">
let markerlist = document.getElementById("markerlist")
markerlist.addEventListener("mouseover", function( event ){
var row = event.path[1];
var id = $(row).attr('dataid');
google.maps.event.trigger(allMarkers[id], 'click');
});
【讨论】：