循环通过 marker.layers 并仅更改一个 CCS 图层属性的问题

Posted 2023-05-06

【中文标题】循环通过 marker.layers 并仅更改一个 CCS 图层属性的问题

【英文标题】：Problem looping through marker.layers and changing only one CCS layer properties

【发布时间】：2021-12-14 22:18:14

【问题描述】：

我在地图上有几个标记。它们可以很好地加载、添加和删除，但我不能只在一个标记上更改一个 CSS 元素，我可以找到 layerm。如果我遍历图层但找到正确的图层并应用更改，它会更改所有标记图层的 CSS 属性吗？我将展示它的基本运行情况。

我如何添加标记：-

    var client = L.divIcon(
    className: 'location-pin',          
    html: '<img id"operatorimg" src="img/'+point.name+'.jpg"><div id="pin" class="pin busy"></div>',
    iconSize: [60, 60],
    iconAnchor: [20, 66]);
    
    var marker = L.marker ([point.lat, point.lng], 
        icon: client
    );
    
    markerLayer.addLayer(marker);

    marker.name = point.name;
    status = point.status;  
    var username = point.name;      
    marker.bindPopup(username + ' is online but is busy');

数据加载如下：-

const pointsForMarker = [
   name: 'LILLY', lat: 52.4904975, lng: -1.5151260, ID: 100101, status: 'ONLINE',
   name: 'SAM', lat: 52.4734975, lng: -1.4911260, ID: 100102, status: 'OFFLINE'
];

我循环并添加标记，如下所示：-

pointsForMarker.forEach((point) => 

if (point.status === 'ONLINE') 

    var client = L.divIcon(
        className: 'location-pin',          
        html: '<img id"operatorimg" src="img/'+point.name+'.jpg"><div id="pin" class="pin online"></div><div class="pulse"></div>',
        iconSize: [60, 60],
        iconAnchor: [20, 66]);

        
        var marker = L.marker ([point.lat, point.lng], 
            icon: client
        );
        
        markerLayer.addLayer(marker);
        marker.name = point.name;
        status = point.status;
        var username = point.name;      
        marker.bindPopup(username + ' is online now and available');

现在我可以像这样删除标记并且它可以工作：-

markerLayer.eachLayer((layer) => 
    var markerToDismiss = "LILLY";
    if (markerToDismiss) 

      if (layer.name.trim().toLowerCase() === markerToDismiss.trim().toLowerCase()
      ) 
        layer.removeFrom(markerLayer);
      

但是，如果我尝试相同并更改 CSS，当我只希望它像删除一样更改匹配的 CSS 时，所有标记 CSS 都会更改？？？

我正在尝试：-

//// test delete marker ///
markerLayer.eachLayer((layer) => 
    var markerTochange = "LILLY";

alert(layer.name);

      if (layer.name === markerTochange)
       
        //layer.removeFrom(markerLayer);
        layer.name = $(".pin").css("background", "red");
      
 
  

样式的 CSS 是：-

.location-pin img 
  width: 92px;
  height: 92px;
  margin: -53px 0 0 -26px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;
  background: #32383e;


.pin 
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -86px 0 0 -60px;


.user-location-pin img 
  width: 46px;
  height: 46px;
  margin: -26px 0 0 -13px;
  z-index: 10;
  position: absolute;
  border-radius: 50%;
  background: #32383e;


.user-pin 
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;



.pulse 
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 15px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;



.online 
      background: green;

.offline 
      background: red;


.busy 
      background: orange;



.location-user img 
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;


.user-pin 
  width: 50px;
  height: 50px;
  border-radius: 50% 50% 50% 0;
  background: #32383e;
  position: absolute;
  transform: rotate(-45deg);
  left: 50%;
  top: 50%;
  margin: -43px 0 0 -30px;


.pulse 
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  height: 14px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;

.pulse:after 
  content: "";
  border-radius: 50%;
  height: 40px;
  width: 40px;
  position: absolute;
  margin: -13px 0 0 -13px;
  animation: pulsate 2.5s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  background: rgba(94,190,255,0.5);
  box-shadow: 0 0 1px 2px #2d99d3;
  animation-delay: 1.1s;

@-moz-keyframes pulsate 
  0% 
    transform: scale(0.1, 0.1);
    opacity: 0;
  
  50% 
    opacity: 1;
  
  100% 
    transform: scale(1.2, 1.2);
    opacity: 0;
  

@-webkit-keyframes pulsate 
  0% 
    transform: scale(0.1, 0.1);
    opacity: 0;
  
  50% 
    opacity: 1;
  
  100% 
    transform: scale(1.2, 1.2);
    opacity: 0;
  

@-o-keyframes pulsate 
  0% 
    transform: scale(0.1, 0.1);
    opacity: 0;
  
  50% 
    opacity: 1;
  
  100% 
    transform: scale(1.2, 1.2);
    opacity: 0;
  

@keyframes pulsate 
  0% 
    transform: scale(0.1, 0.1);
    opacity: 0;
  
  50% 
    opacity: 1;
  
  100% 
    transform: scale(1.2, 1.2);
    opacity: 0;
  

我真的希望我能举个例子，但我对这一切都很陌生，不知道该怎么做，如果我没有正确地做到这一点，我很抱歉。我会看看那个 jfiddle 看看我是否可以添加它。

【参考方案1】：

我成功了！我将用户名添加到 DIV ID 并将状态添加到类。通过遍历用户并获取名称，我可以很容易地控制各个标记。

我将名称添加到 DIV 并将类分配给状态，这反过来会使用以下内容更改标记的颜色：-

    var status;
    var username;
    usersOnlineStatus.forEach((point) => 
    
    // status = status.point.trim().toLowerCase();
    
    
    username = point.name;
    status = point.status;
    
    
        var client = L.divIcon(
            className: 'location-pin',          
            html: '<img id="operatorimg" src="img/'+point.name+'.jpg"><div id='+username+' class="pin '+status+'"></div>',
            iconSize: [60, 60],
            iconAnchor: [20, 66]);

And to find the marker and change the DIV, I look like so :-

usersOnlineStatus.forEach((point) => 

    var status = point.status;
    var mname = point.name;
    
    var nametoupdate = mname; 
    
    if (status ==="online") 
    
    var nametoupdate = '#' + nametoupdate;
    $(nametoupdate).removeClass("online");
    $(nametoupdate).removeClass("offline");
    $(nametoupdate).removeClass("busy");
    $(nametoupdate).addClass("online");
    

我在从集群中删除标记时遇到问题，但我正在尝试！