[英]Mouse over Popup on multiple markers leaflet.js?
so I have a leaflet map with lot of markers placed on it. 所以我有一张传单地图,上面放着很多标记。 I want to have a popup with like the status of asset etc on 'hover' over the marker. 我希望在标记上的“悬停”上有一个像资产等状态的弹出窗口。 I see some examples on google and try to implement but none of them is firing any events. 我在谷歌上看到了一些例子并尝试实现,但没有一个是触发任何事件。 here is my code with my attempt. 这是我尝试的代码。 how can i achieve this feature? 我怎样才能实现这个功能? do i have to use somekind of tooltip instead of popup? 我是否必须使用某种工具提示而不是弹出窗口?
buildMarkerLayer = (rawAssetsObjects) => {
let markersGroup = null;
var self = this;
markersGroup = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
spiderfyDistanceMultiplier: 2
});
self.$localForage.getItem('showAllAreas').then((_showAll) => {
if(_showAll){
this.loadAllAreas();
}else{
this.hideAllAreas();
}
});
angular.forEach(rawAssetsObjects, function(_asset) {
if(_asset.latitude && _asset.longitude){
markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset)
})
}).on('click', function(e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}).bindPopup('work').on('mouseover',function(ev) {
markersGroup.openPopup();
}));
};
});
return markersGroup
}
so I added the mouseover function and is responding on the console with error, so at least i know the listening part is working 所以我添加了鼠标悬停功能,并在控制台上响应错误,所以至少我知道听力部分正在工作
I was close to the answer, while following many examples on google they made L.Marker
into a variable like var marker = L.marker
. 我接近答案,而在谷歌上的许多例子后,他们将L.Marker
变成了像var marker = L.marker
这样的变量。 Then call marker.openPopup()
. 然后调用marker.openPopup()
。 My case, as you can see, I straight called L.marker
. 我的情况,正如你所看到的,我直接称为L.marker
。 Problem was calling L.marker.openPopup() or L.marker(openPopup()) throws error saying openPopup
is undefined
. 问题是调用L.marker.openPopup()或L.marker(openPopup())抛出错误,说openPopup
是undefined
。 so the solution was pretty straight forward and make L.marker
into a variable. 因此解决方案非常简单,并将L.marker
变为变量。 like below. 如下。 I also added small popup formatting like where pop-up should display using popAnchor
and HTML formatting, for future flowers 我还添加了一些小弹出格式,比如弹出窗口应该使用popAnchor
和HTML格式显示,以用于未来的鲜花
angular.forEach(rawAssetsObjects, function (_asset) {
let marker = L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset),
popupAnchor: [0,-80]
})
});
if (_asset.latitude && _asset.longitude) {
let content = "<b>"+_asset.name+"</b>"+"<br>"+"<b>"+'Status: '+"</b>"+_asset.status
markersGroup.addLayer( marker.bindPopup(content)
.on('mouseover', function (e) {
self.siMapRam.setActive(_asset);
self.$rootScope.$broadcast('ActiveAssetChange');
marker.openPopup()
})
.on('click', function (e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly selected asset to query
self.$rootScope.$broadcast('ActiveAssetChange');
self.dgModal.display();
}));
};
});
return markersGroup
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.