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

Question

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

我有一项服务返回纬度和经度位置，该位置将在 map 上标记。

我需要将鼠标悬停在标记上时弹出窗口。该事件应将 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 函数，我们调用 click 函数

如何在上面的代码中添加鼠标在经过纬度和经度时弹出？

Answer 1

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

当您想在 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();
});

如果您想在停止悬停而不是 map 单击时关闭弹出窗口，请添加以下内容:

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

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