在leaflet.js地图标记上悬停鼠标弹出窗口

Question

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

我有一个服务，返回经纬度位置，将在地图上标记。

当鼠标悬停在标记上时，我需要弹出框。事件应发送经纬度位置，例如：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函数，调用click函数。

如何在鼠标悬停时添加一个弹出窗口，并传递上述代码中的纬度和经度？

- user3349850

---

也许您可以分享一下您尝试过的内容，出现了什么问题，您遇到了哪些错误，同时添加代码和示例，以便问题可以被重现。我们无法猜测出错的原因。请参阅：http://stackoverflow.com/help/how-to-ask - iH8

请提供一个英文编程内容的样本，我将为您翻译。 - user3349850

Answer 1

将弹出窗口附加到标记很容易。只需调用L.Marker实例的bindPopup方法即可。默认情况下，弹出窗口在单击L.Marker实例时打开，并在单击L.Map实例时关闭。如果您想在弹出窗口打开时执行某些操作，可以侦听L.Map实例的popupopen事件。

当您希望在popupopen事件中后台获取外部数据时，通常通过XHR / AJAX完成。您可以编写自己的逻辑或使用类似于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。

- iH8

---

非常感谢你的回复。我期望的小改变是当鼠标悬停在标记上时弹出而不是点击事件，因为我正在使用点击事件做其他用途。请帮忙处理。 - user3349850

不用谢，你随时都受欢迎。但你可以考虑将答案标记为已接受，以便其他遇到类似问题的用户也能找到经过测试/有效的解决方案。请参见：https://stackoverflow.com/help/someone-answers 关于鼠标悬停，我已经编辑了我的问题并添加了一个解决方案。祝好运！ - iH8

Answer 2

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

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

下一步是使用jQuery分配一个id，使用这个alt和title（为什么不能默认执行这个操作让我很烦恼）：

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

接着，我使用了jQuery提示工具（html将只呈现这种方式）：

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

此外，通过使用jQuery提示工具而不是仅绑定弹出的单击事件，我可以从我的列表中触发提示工具，在该行具有匹配的键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')
})

- Cheryl Miller