只要我在地图上拖动鼠标，鼠标悬停事件就会触发

如何解决只要我在地图上拖动鼠标，鼠标悬停事件就会触发

我正在处理 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

获取国家名称

link to code

解决方法

您可以创建一个“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/