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

Question

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

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

我需要在鼠标上弹出一个标记。该事件应将 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

将弹出窗口附加到标记是相当容易的。它是通过调用实例的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();
});

如果要在停止悬停而不是地图单击时关闭弹出窗口，请添加以下内容：

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

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