将鼠标悬停在 leaflet.js 标记上的弹出窗口上

Question

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

我有一项服务 returns 将在地图上标记的纬度和经度位置。

我需要在鼠标悬停在标记上时弹出窗口。该事件应将 ex 的经纬度位置发送到：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 函数，我们调用点击函数

如何在上面的代码中传递纬度和经度时在鼠标上添加一个弹出框？

Answer 1

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

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

在带有注释的代码中进一步解释：

// 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

评论后：

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

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

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

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

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

Answer 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 工具提示而不是 click-only 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')
})

将鼠标悬停在 leaflet.js 标记上的弹出窗口上

Mouse over popup on leaflet.js marker

popup

leaflet

mouseover

marker