Блог

Главная - Вопросы по программированию - отображение времени в полилинии листовки onmouseover

отображение времени в полилинии листовки onmouseover

#javascript #leaflet

#javascript #листовка

Вопрос:

привет, я создаю полилинию листовки с помощью latlngs[]. в начале wat мы передаем [lat,long] в latlngs[], но я хочу передать третью строку аргумента DateTime, и я хочу показывать в промежутке, когда точка в полилинии наведена мышью.

что-то вроде:

 let latlangs = [ 
   [12.12, 12.12, '2020/12/12 - 10:30'], 
   [15.15, 15.15, '2020/10/10 - 12:30'] 
];

let antPolyline = new L.Polyline.AntPath(latlngs, options);

antPolyline.on('mouseover', e => {
        $('span').html('third argument string dateTime');
});

Комментарии:

1. что new L.Polyline.AntPath(latlngs, options); возвращает, потому что я знаю, как обычно делать то, что вы имеете в виду, но как извлечь из этого определенную часть, неизвестно, поскольку мне это неизвестно: {

2. то же, что и полилиния листовки по умолчанию, она возвращает слой полилинии, я думаю

Ответ №1:

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

 var latlngs = [
  [19.04469, 72.9258, '2020/12/12 - 09:20'],
  [19.08469, 72.9058, '2020/12/13 - 10:30'],
  [20.13469, 72.9258, '2020/12/12 - 11:40']
]
var polyline = L.polyline(latlngs).addTo(map) //working same as ant polyline


polyline.on('mouseover',(e)=>{
  var point = findClosestPoint(e.latlng);
  var text = point[2];
  console.log(text)
  document.getElementById('testspan').innerHTML = text;
})



function findClosestPoint(latlng){
    var closestPoint = null;
  var distance = 0;
  latlngs.forEach((point)=>{
    if(closestPoint == null || distance > L.latLng([point[0],point[1]]).distanceTo(latlng)){
        distance = L.latLng([point[0],point[1]]).distanceTo(latlng);
      closestPoint = point;
    }
  });
  return closestPoint;
}

https://jsfiddle.net/falkedesign/Lbg3oqja/

Комментарии:

1. я надеюсь, что я пропустил что-то в документации, чего нет у других пользователей, но я вижу, что нет возможности вернуть одиночный latlng[] для доступа к третьей строке. ваше решение сработало отлично, и спасибо за ваше время.

Ответ №2:

Вы просите прослушать событие наведения курсора мыши на определенный элемент HTML для отображения некоторого текста .. Хорошо, это помогает?

 let lantlangs = [ 
  [12.12, 12.12, '2020/12/12 - 10:30'], 
  [15.15, 15.15, '2020/10/10 - 12:30'] 
];
let antPolyline = new L.Polyline.AntPath(latlngs, options);
//now to do what you asked
var mySpan=document.getElementById('mySpan')
mySpan.onmouseover=function(){mySpan.innerHTML=antPolyline[2]}
//the antPolyline[2] is my guess of what data you want displayed and I'm also assuming that the id of this specific span is 'mySpan'
Метки: