如何打开弹出窗口作为悬停而不是点击

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

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

我使用的代码

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

我有另一个推标记它建立巴士站就数据在相同的层上设置。

现在我该怎样显示弹出窗口当鼠标移动到它们作为悬停，而不是向他们展示上点击

P.S的 - 我是新来的编码，因此，请帮助我进一步进行。

来源

2016-09-08 user6591323

对于您创建的每个标记，您必须听“鼠标悬停”和“鼠标悬停”事件。

当'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

来源

2016-09-08 12:41:27 YaFred

我正在使用Angular Leaflet而不是传单，所以上面示例中使用的“消息”创建了我的弹出窗口。那么在那种情况下我该怎么做呢？ – user6591323

首先，你必须包括“leafletData”到控制器，之后添加“鼠标悬停”和“鼠标移出”事件到你的标记。

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(); 
    }); 
    }); 
}]);

来源

2017-02-19 09:01:47

如何打开弹出窗口作为悬停而不是点击

回答

相关问题