Мышь над всплывающим окном на листочке.js marker

Question

Как добавить курсор мыши для всплывающего окна на листе leaflet.js. всплывающие данные будут динамическими.

У меня есть служба, которая возвращает лат & позиции лонга, которые будут отмечены на карте.

Мне понадобится всплывающее окно мыши над маркером. событие должно отправить lat и длинную позицию для 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 и длиной от вышеуказанного кода?

Answer 1

Прикрепление всплывающего окна к маркеру довольно просто. Это делается путем вызова метода bindPopup вашего экземпляра L.Marker. По умолчанию всплывающее окно открывается на событии click экземпляра L.Marker и закрывает событие click вашего экземпляра L.Map. Теперь, если вы хотите что-то сделать, когда всплывающее окно открывается, вы можете прослушивать событие popupopen вашего экземпляра L.Map.

Если вы хотите получить внешние данные в фоновом режиме на событии popupopen, которое обычно выполняется через XHR/AJAX. Вы можете написать свою собственную логику или использовать что-то вроде jQuery's 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

я надоела борьба с листовка встроенной функциональностью.Первое, что я сделал, было использовать опцию альт, чтобы назначить клавишу для маркера:

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

Следующая вещь была назначьте идентификатор с помощью этого альт и заголовок с помощью JQuery (почему вы не можете сделать это по умолчанию меня раздражает):

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

Затем я использовал JQuery всплывающую подсказку (HTML будет только сделать этот путь):

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

Кроме того, с помощью всплывающей подсказки JQuery вместо щелчка только bindPopup, я способный стрелять инструментами р из моего списка, где строка имеет соответствующий идентификатор ключа:

$('.search-result-list').live('mouseover',function(){ 
    $('#marker_'+$(this).attr('id')).tooltip('open') 
}) 

$('.search-result-list').live('mouseout',function(){ 
    $('#marker_'+$(this).attr('id')).tooltip('close') 
}) 

Добавляя идентификатор, я могу легко использовать 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') 
})