Question

我想打开Angular Leaflet中的弹出窗口作为悬停而不是点击。

我初始化了一个标记数组，并在基础图层的顶部叠加了一层。

我正在尝试创建一个公共汽车和公共汽车站彼此相同的层。因此，每个图层在叠加层中属于相同的类型。

我正在使用代码

markers = [];
markers.push(
{ layer : layername,
          lat : latitude,
          lng : longitude,
          message: busNames(data),
   icon :{....}
 }
 });

我在构建busStop数据的同一层上设置了另一个推送标记。

现在，当鼠标悬停在鼠标悬停上而不是点击时显示弹出窗口时，如何显示弹出窗口

P.S - 我是编码的新手，因此请帮助我继续进行。

Answer 1

对于您正在创建的每个标记，您必须收听“mouseover”和“mouseout”事件。

发送'mouseover'时打开弹出窗口，发送'mouseout'时关闭它。

    var marker = L.marker([51.5, -0.09]).addTo(map);
    var tooltipPopup;

    marker.on('mouseover', function(e) { 
    tooltipPopup = L.popup({ offset: L.point(0, -50)});
            tooltipPopup.setContent("Hello");
            tooltipPopup.setLatLng(e.target.getLatLng());
            tooltipPopup.openOn(map);

    });

    marker.on('mouseout', function(e) { 
        map.closePopup(tooltipPopup);
    });

这是example

Answer 2

首先，你必须包括＆＃39; leafletData＆＃39;在你的控制器之后添加鼠标悬停＆＃39;并且＆＃39; mouseout＆＃39;事件给你的标记。

angular
.module('myapp')
.controller("EventsController", [ '$scope', 'leafletData', function($scope, leafletData) {

  $scope.$on('leafletDirectiveMarker.mouseover', function(event, args){
    console.log('I am over!');
    var popup = L.popup({ offset: L.point(0, -28)})
                .setLatLng([args.model.lat, args.model.lng])
                .setContent(args.model.message)
    leafletData.getMap().then(function(map) {
      popup.openOn(map);
    });
  });

  $scope.$on('leafletDirectiveMarker.mouseout', function(event){
    leafletData.getMap().then(function(map) {
      map.closePopup();
    });
  });
}]);

如何在Leaflet中打开Poplet作为悬停而不是单击

2 个答案: