鼠标悬停在多个标记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
}