Javascript 如何在谷歌地图上找到最靠近鼠标光标的lat/lon位置

我有很多马克笔

左边是谷歌地图上实际标记的标记抽象列表

我决定使用多段线

   var flightPlanCoordinates = [
    new google.maps.LatLng(near_cursor_lat, near_cursor_lon),
    new google.maps.LatLng(marker_lat, marker_lon)
  ];

  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

其思想是用户将鼠标指向左侧的标记抽象框，然后在地图上显示从标记抽象到实际标记的线条。除了

起点

（图像上的红点）之外，我已经拥有了所有东西

当鼠标指向左侧的框时，如何找到位于鼠标指针旁边的起始lat/long

一些细节： 当鼠标指向sais PERSON1的框时，我想要第一个红点的坐标。当鼠标指向sais PERSON2的框时，我想要第二个红点的坐标。等等有一个技巧部分-左框位于谷歌地图分区之外；此外，如果有许多包含人员的框，左div将允许上下滚动这些人员，因此人员框与红点之间的垂直相关性是动态的

理论上，我认为，我需要一个事件，当我指向其中一个框时触发。激发偶数时，我需要测量从顶部到鼠标指针的垂直距离（以像素为单位）。然后，当我有垂直距离时，我需要执行一些动作，在谷歌地图上测量相同的垂直距离，并以lat/lon坐标在地图上得到该点

---

这应该是您问题的答案：

您应该使用标记来表示（个人），然后在MouseOver上添加一个侦听器，如下面的帖子所示：

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)

在侦听器中使用“覆盖”获取投影和像素坐标：

google.maps.event.addListener(marker, 'mouseover', function() {
    var projection = overlay.getProjection(); 
    var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
    // use pixel.x, pixel.y ... (after some rounding)
}); 

抄袭自：

---

@MehdiKaramosly的答案非常恰当

仅稍微进一步，要获得不属于可见地图一部分的元素的lat lng（如果地图在那里可见），您可以将事件页面X/Y传递到行：

projection.fromLatLngToContainerPixel(marker.getPosition());

像这样：

var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX,e.pageY));

我举了一个非常基本的例子：

如果您单击地图以外的任何位置（相当于单击覆盖它的div），您将在控制台日志中看到您单击的位置（即使它不在可见地图空间中）的lat/lng已被记录

干杯

---

C.

使用 第二次更新

据我所知，您遇到的问题如下：

人员列在分区中，与地图分开

人在地图上有与其相关的纬度和经度

地图使用lat long（可能存储在db或其他格式中）显示带有标记的人的位置

你们需要它，这样人们可以在地图上突出显示一个人，也可以用鼠标点击列表

若你们在地图上或列表中有lat/long可用，你们需要将它们联系在一起

解决方案类似于此，但有许多方法可以实现此映射

在您的部门中列出了人员。当有人将鼠标悬停在每个person元素上时，请将数据mapid属性插入该元素，然后高亮显示该元素并从中获取数据mapid

在地图上渲染标记时，还可以传递参数数据mapid或其他具有相同值的内容，并在地图上具有高亮显示功能

---

---

在上面的代码中，我在地图上显示了html以及id和数据mapid。现在，这个mapid可以是person1 person2，依此类推，这样您就可以使用列表将其关联回div。我使用ul和li将它们列在div中

将鼠标悬停在标记事件上，可以执行以下操作

---

---

我从3个位置复制粘贴了大量冗余代码，因此您可能只需要从中获得所需的内容

这可以使地图链接到列表和列表链接到地图。请在顶部查看我的第二次更新，或单击此。当您单击顶部的列表时，它会打开地图窗口，当您将鼠标悬停在地图图标上时，它会高亮显示列表

---

这也会通过列表而不是js中的硬编码lat long来填充地图。

当您将鼠标悬停在侧菜单上时，是否有任何原因不希望地图在标记上平移和居中？它已经通过“居中图标”在那里了。我不明白您在问什么。试着把你的问题改写得更好。那些你称之为“标记抽象”的东西或按钮，它们是什么类型的对象？它们是覆盖层吗？它们是在地图上还是在地图旁边？从您的图像中，所有红点的经度都是相同的，而纬度是地图顶部的纬度减去按钮的高度乘以位置。（按钮1、按钮2等）。这就是您想要告诉的：当您在person 3框上悬停时，应该画一条线，从地图上3号人物框旁边的点到地图上相应的标记？我没有覆盖在人物上。这很难实现吗？这可能会有帮助是的，人员位于单独的部门，与mapsOK无关；你帮了很多忙；我添加了覆盖，在

div

鼠标悬停事件中，我获取了鼠标坐标。非常感谢。虽然每个人都帮了忙。当我点击“跑步”时，我看到了地图。它应该做什么？打开控制台日志，开始单击地图之外的任何地方。打开控制台日志，开始单击地图之外的任何地方。您将看到，即使未单击地图，纬度和经度仍将继续记录（我理解的操作是，您需要获取隐藏在div下的点的板条）。该lat/lng是与该点相关的lat/lng。我将在地图上用几个div更新演示，以供进一步参考，并添加一个新的linkseing@farrukk和answer。我可能误解了你的需要我在确定和找到标记物方面没有问题；我的问题是找到n

`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);
                });`

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','');
                                                        });
                                                    }
                                            }