Question

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

我有一项服务，它返回一个lat＆amp; lon将在地图上标记的位置。

我需要在鼠标上方弹出标记。该事件应将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功能我们称之为点击功能

如何在上面的代码中通过lat和long添加鼠标上的pop？

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

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标记上

2 个答案: