当我在地图上拖动鼠标时，鼠标悬停事件就会触发答案

【问题标题】：Mouseover event firing up as soon as I drag the mouse on the map当我在地图上拖动鼠标时，鼠标悬停事件就会触发
【发布时间】：2021-08-22 04:11:47
【问题描述】：

我正在处理 Leaflet 并且遇到了鼠标悬停事件。我想要的是在我移动悬停并在地图上停止时显示工具提示信息。但是，一旦我打开地图，我的实现就会启动。在我的情况下它是如何工作的完全有道理，但是当“鼠标悬停”在地图上的特定位置时，我找不到显示工具提示的方法。此外，它应该在鼠标悬停时可移除，并在鼠标悬停时再次显示工具提示。这是我的代码：

   mymap.on('click', function(e){
  var lt = String(e.latlng.lat),
  lg = String(e.latlng.lng);

  const Http = new XMLHttpRequest();
  const url='http://api.geonames.org/findNearbyPlaceNameJSON?lat='+lt+'&lng='+lg+'&username=aziyatali';
  Http.open("GET", url);
  Http.send();

 Http.onreadystatechange = (ev) => {
  var countryData = JSON.parse(Http.responseText);
  console.log(countryData);
  var countryName = countryData.geonames[0].countryName;
  console.log("My requestL ", countryName);
  var popup = L.popup()
    .setLatLng(e.latlng)
    .setContent(countryName)
    .openOn(mymap);
}
});

目前，当我点击地图的特定部分时，它会显示当前的国家名称。它通过 geonamesAPI

获取当前事件的 latlng 并获取国家名称

link to code

【问题讨论】：

标签： javascript events leaflet mouseover

【解决方案1】：

你可以创建一个“mousemove - end - listener”。

var timeout = null;
mymap.on('mousemove', function(e){
    clearTimeout(timeout);
  timeout = setTimeout(()=>{runScript(e)},200);
});

function runScript(e){
  var lt = String(e.latlng.lat),
  lg = String(e.latlng.lng);

  const Http = new XMLHttpRequest();
  const url='http://api.geonames.org/findNearbyPlaceNameJSON?lat='+lt+'&lng='+lg+'&username=aziyatali';
  Http.open("GET", url);
  Http.send();

  Http.onreadystatechange = (ev) => {
    var countryData = JSON.parse(Http.responseText);
    console.log(countryData);
    var countryName = countryData.geonames[0].countryName;
    console.log("My requestL ", countryName);
    var popup = L.popup()
    .setLatLng(e.latlng)
    .setContent(countryName)
    .openOn(mymap);
  }
}

每次调用 mousemove 事件时，都会重置超时并重新启动。如果不再清除 -> 鼠标停止，您可以执行脚本。

http://jsfiddle.net/falkedesign/ot4bq6Lx/

【讨论】：