将鼠标悬停在多个标记 leaflet.js 上的弹出窗口上？

Question

所以我有一张带有很多标记的传单地图。我想在标记上方的 'hover' 上弹出一个类似资产状态等的弹出窗口。我在 google 上看到了一些示例并尝试实施，但其中 none 正在触发任何事件。这是我尝试的代码。我怎样才能实现这个功能？我必须使用某种工具提示而不是弹出窗口吗？

  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
}

所以我添加了鼠标悬停功能并在控制台上响应错误，所以至少我知道听力部分正在工作

Answer 1

我已经接近答案了，而在 google 上遵循许多示例时，他们将 L.Marker 变成了像 var marker = L.marker 这样的变量。然后调用marker.openPopup()。如您所见，我的情况是直接调用 L.marker。问题是调用 L.marker.openPopup() 或 L.marker(openPopup()) 会抛出错误，指出 openPopup 是 undefined。所以解决方案非常简单，将 L.marker 变成一个变量。像下面。我还添加了小的弹出窗口格式，例如使用 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
}

将鼠标悬停在多个标记 leaflet.js 上的弹出窗口上？

Mouse over Popup on multiple markers leaflet.js?

javascript

angularjs

leaflet

angular-leaflet-directive