将鼠标悬停在 Leaflet.js 标记上的弹出窗口上答案

【问题标题】：Mouse over popup on leaflet.js marker将鼠标悬停在 Leaflet.js 标记上的弹出窗口上
【发布时间】：2015-12-11 20:01:35
【问题描述】：

如何在 leaflet.js 标记上添加鼠标。弹出的数据将是动态的。

我有一项服务，它会返回将在地图上标记的纬度和经度位置。

我需要鼠标悬停在标记上。该事件应将 ex 的 lat 和 long 位置发送到：http://api.openweathermap.org/data/2.5/weather?lat=40&lon=-100 来自服务的数据应该在弹出内容中。我已经尝试过，但无法动态构建每个标记的弹出内容

请做必要的事情。

下面是我用于标记的代码 statesdata 是存储纬度和经度值的数组

for ( var i=0; i < totalLength1; i++ ) {
                         var LamMarker = new L.marker([statesData1[i].KK, statesData1[i].LL]).on('contextmenu',function(e) {
                             onClick(this, i);                  
                        }).on('click',function(e) {
                        onClick1(this, i)                   
                        });
                        marker_a1.push(LamMarker);
                        map.addLayer(marker_a1[i]);

点击时我们在标记上下文中调用 click1 函数，我们称之为点击函数

如何通过上述代码传递 lat 和 long 在鼠标上添加弹出窗口？

【问题讨论】：

也许你可以分享你尝试过的，出了什么问题，你遇到了什么样的错误，添加代码和示例，以便可以重现问题。我们根本无法猜测出了什么问题。见：stackoverflow.com/help/how-to-ask
相应地编辑了问题

标签： popup leaflet mouseover marker

【解决方案1】：

将弹出窗口附加到标记相当容易。这是通过调用L.Marker 实例的bindPopup 方法来完成的。默认情况下，弹出窗口在L.Marker 实例的click 事件上打开，并在L.Map 实例的click 事件上关闭。现在，如果您想在弹出窗口打开时执行某些操作，您可以监听 L.Map 实例的 popupopen 事件。

当您希望在通常通过 XHR/AJAX 完成的 popupopen 事件的后台获取外部数据时。您可以编写自己的逻辑或使用类似 jQuery 的 XHR/AJAX 方法，如 $.getJSON。收到响应数据后，您可以更新弹出窗口的内容。

在代码中用 cmets 进一步解释：

// A new marker 
var marker = new L.Marker([40.7127, -74.0059]).addTo(map);

// Bind popup with content
marker.bindPopup('No data yet, please wait...');

// Listen for the popupopen event on the map
map.on('popupopen', function(event){
  // Grab the latitude and longitude from the popup
  var ll = event.popup.getLatLng();
  // Create url to use for getting the data
  var url = 'http://api.openweathermap.org/data/2.5/weather?lat='+ll.lat+'&lon='+ll.lng;
  // Fetch the data with the created url
  $.getJSON(url, function(response){
    // Use response data to update the popup's content
    event.popup.setContent('Temperature: ' + response.main.temp);
  });
});

// Listen for the popupclose event on the map
map.on('popupclose', function(event){
  // Restore previous content
  event.popup.setContent('No data yet, please wait...');
});

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/oq7RO5?p=preview

在cmets之后：

如果您想在悬停时打开弹出窗口而不是单击，您可以添加以下内容：

marker.on('mouseover', function(event){
  marker.openPopup();
});

如果您想在停止悬停而不是地图时关闭弹出窗口，请单击添加：

marker.on('mouseout', function(event){
  marker.closePopup();
});

这是一个更新的示例：http://plnkr.co/edit/wlPV4F?p=preview

【讨论】：

非常感谢您的回复。我期望的小变化是鼠标悬停事件上的弹出窗口，而不是标记上的单击事件。因为我将点击事件用于其他目的。请做必要的事情
不，谢谢，我们随时欢迎您。但是，您可以考虑将答案标记为已接受，以便有类似问题的其他用户也可以找到经过测试/工作的解决方案。请参阅：stackoverflow.com/help/someone-answers 关于鼠标悬停，我已经编辑了我的问题并为其添加了解决方案。祝你好运！

【解决方案2】：

我厌倦了与传单的内置功能作斗争。我做的第一件事是使用 alt 选项为标记分配一个键：

var myLocation = myMap.addLayer(L.marker(lat,lng],{icon: icon,alt: myKey}))

接下来的事情是使用这个 alt 分配一个 id，并通过 jQuery 分配一个标题（为什么默认情况下你不能这样做让我很恼火）：

$('img[alt='+myKey+']').attr('id','marker_'+myKey).attr('title',sRolloverContent)

然后，我使用了 jQuery 工具提示（html 只会以这种方式呈现）：

$('#marker_'+myKey).tooltip({
    content: sRolloverContent
})

此外，通过使用 jQuery 工具提示而不是仅单击的 bindPopup，我可以从列表中触发工具提示，其中行具有匹配的键 id：

$('.search-result-list').live('mouseover',function(){
    $('#marker_'+$(this).attr('id')).tooltip('open')
})

$('.search-result-list').live('mouseout',function(){
    $('#marker_'+$(this).attr('id')).tooltip('close')
})

通过添加 id，我可以轻松地使用 jQuery 做任何我想做的事情，比如在标记悬停时突出显示位置列表：

$('#marker_'+iFireRescue_id).on('mouseover',function(){
    ('tr#'+getIndex($(this).attr('id'))).removeClass('alt').removeClass('alt-not').addClass('highlight')
})

$('#marker_'+myKey).on('mouseout',function(){
    $('tr#'+getIndex($(this).attr('id'))).removeClass('highlight')
    $('#search-results-table tbody tr:odd').addClass('alt')
    $('#search-results-table tbody tr:even').addClass('alt-not')
})

【讨论】：