如何在谷歌地图上找到最接近鼠标光标的纬度/经度位置

Question

我有很多标记。

在左边我有谷歌地图上实际标记的标记抽象列表。

我决定使用折线

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

这个想法是用户将鼠标指向左侧的标记抽象框，然后他在地图上显示从标记抽象到实际标记的线。除了STARTING POINT（图片上的红点）之外，我已经拥有了所有东西

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

一些细节： 当鼠标指向 sais PERSON1 的框时，我想要第一个红点的坐标。当鼠标指向 sais PERSON2 的框时，我想要第二个红点的坐标。等等。有一个技巧部分 - 左框位于谷歌地图 div 之外；另外，如果PERSONS的盒子很多，左边的div会允许上下滚动这些人，所以persons box和红点之间的垂直关联是动态的。

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

Answer 1

这应该是您问题的答案：

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

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

复制自： Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker

Answer 2

@MehdiKaramosly 的回答非常准确。

只需稍微推进上述内容，要获得不属于可见地图（如果地图在那里可见）的元素的 lat lng，您可以将事件页面 X/Y 传递到该行：

projection.fromLatLngToContainerPixel(marker.getPosition());

像这样：

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

我在http://tinkerbin.com/p30yEXqH放了一个非常基本的例子

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

干杯，

C.

Answer 3

更新Working Example of this code 第二次更新 JsFiddle Example of both ways click and open map window or mouseover map to highlight listing

据我了解，您遇到的问题如下：

1. 人员列在与地图分开的 div 中
2. 地图上的人有与其相关联的纬度和经度
3. 地图使用 lat long 显示带有标记的人的位置（可能存储在 db 或其他东西中）
4. 您需要它，这样人们就可以在地图上突出显示一个人，以及将鼠标悬停在列表中。

如果您在地图或列表中有可用的纬度/经度，您需要将它们关联起来。

解决方案是这样的，但有很多方法可以实现这种映射

1. 在您列出人员的 div 中。当有人将鼠标悬停在每个 person 元素上时，将 data-mapid 属性插入到每个元素上，然后突出显示它并从那里获取 data-mapid。
2. 在您的地图上，当您渲染一个标记时，您还可以传递一个参数 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 example。当您单击顶部的列表时，它会打开地图窗口，当您将鼠标悬停在地图图标上时，它会突出显示列表。

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