鼠标悬停在多个标记leaflet.js上？

Question

所以我有一张传单地图,上面放着很多标记.我希望在标记上的"悬停"上有一个像资产等状态的弹出窗口.我在谷歌上看到了一些例子并尝试实现,但没有一个是触发任何事件.这是我尝试的代码.我怎样才能实现这个功能？我是否必须使用某种工具提示而不是弹出窗口？

  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

我接近答案，同时在谷歌上遵循许多例子，他们把它们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
}