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

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

想法是用户将鼠标指向左侧的标记抽象框，然后他在 map 上显示从标记抽象到实际标记的线。除了STARTING POINT(图片上的红点)

，我已经拥有了所有东西

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

一些细节: 当鼠标指向表示 PERSON1 的框时，我想要第一个红点的坐标。当鼠标指向 PERSON2 的框时，我想要第二个红点的坐标。等等。有一个技巧——左边的框位于谷歌地图 div 之外；另外，如果有很多人框，左边的 div 将允许上下滚动这些人，所以人框和红点之间的垂直相关性是动态的。

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

Answer 1

这应该是您问题的答案:

您应该使用标记来表示(人)，然后像下面的帖子一样在 MouseOver 上添加一个监听器:

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

在监听器中使用overlay获取投影和像素坐标:

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