鼠標懸停在多個標記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
}