使用此代码的工作示例进行
更新使用JsFiddle 进行第二次更新两种方式的示例单击并打开地图窗口或鼠标悬停地图以突出显示列表
据我了解，您遇到的问题如下：
- 人员列在与地图分开的 div 中
- 人们在地图上具有与其相关联的纬度和经度
- 地图使用 lat long 显示带有标记的人的位置（可能存储在 db 或其他东西中）
- 你想要它，这样人们就可以在地图上突出显示一个人，以及鼠标悬停在列表中。
如果您在地图或列表中有可用的纬度/经度，您需要将它们关联在一起。
解决方案是这样的，但是有很多方法可以实现这种映射
- 在您列出人员的 div 中。当有人将鼠标悬停在每个人元素上时，将 data-mapid 属性插入到每个元素上，然后突出显示它并从那里获取 data-mapid。
- 在您的地图上，当您渲染一个标记时，您还可以传递一个参数 data-mapid 或其他具有相同值的东西，并且在地图上也有一个突出显示功能。
`jQuery("#gmap3ul li[data-gb='plist']").each(function(){
elemtopush = {
lat:jQuery(this).attr("data-lat"),
lng:jQuery(this).attr("data-long"),
data:{
"ht":jQuery(this).html(),
"id":jQuery(this).attr("data-mapid")
}
};
ulmarkerspgb.push(elemtopush);
});`
在上面的代码中，我有要在地图上显示的 html 以及作为 data-mapid 的 id 现在这个 mapid 可以是 person1 person2 等等，所以你可以用列表关联到 div。我正在使用 ul 和 li 在 div 中列出它们。
在将鼠标悬停在标记事件上时，您可以执行以下操作
mouseover: function(marker, event, data)
{
clearalllist();
var listelement = jQuery("td[data-mapid='"+data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
var map = jQuery(this).gmap3('get'),
infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data.ht);
google.maps.event.addListener(infowindow, 'closeclick', function(event) {
jQuery(listelement).attr('style','');
});
google.maps.event.addListener(infowindow, 'close', function(event) {
jQuery(listelement).attr('style','');
});
} else {
jQuery(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data.ht}});
infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
google.maps.event.addListener(infowindow, 'closeclick', function(event) {
jQuery(listelement).attr('style','');
});
google.maps.event.addListener(infowindow, 'close', function(event) {
jQuery(listelement).attr('style','');
});
}
}
我从 3 个位置复制粘贴了很多冗余代码，因此您可能只能从中获得所需的内容。
这可以使地图链接到列表和列表链接到地图。请参阅我在顶部的第二次更新或单击此JSFiddle 示例。当您单击顶部的列表时，它会打开地图窗口，当您将鼠标悬停在地图图标上时，它会突出显示列表。
这也通过列表而不是在 js 中硬编码 lat longs 来填充地图。
