1

我有很多标记。

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

我决定使用折线

   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 之外；另外，如果有很多人的框，左边的div会允许上下滚动这些人，所以人框和红点之间的垂直相关性是动态的。

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

在此处输入图像描述

4

3 回答 3

1

使用此代码的工作示例进行 更新使用JsFiddle 进行第二次更新两种方式的示例单击并打开地图窗口或鼠标悬停地图以突出显示列表

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

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

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

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

  1. 在您列出人员的 div 中。当有人将鼠标悬停在每个人元素上时，将 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 示例。当您单击顶部的列表时，它会打开地图窗口，当您将鼠标悬停在地图图标上时，它会突出显示列表。

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

于 2013-01-28T21:33:24.793 回答
1

@MehdiKaramosly 的回答很到位。

只是稍微推进上述内容，要获得不属于可见地图的元素的纬度 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。

于 2013-01-28T13:42:29.733 回答
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

于 2013-01-24T15:49:31.860 回答