需要在 Grafana 世界地图面板上的确切位置标记土地

Question

我从事一个 grafana 世界地图项目，该项目可以从客户端接收经纬度并在地图上进行处理

一切正常，直到客户端给出相同的纬度，经度位置，它已经在地图中发现新标记落在旧标记下方，依此类推，如果客户端仍然给出相同的纬度，经度

我需要一个标记土地到客户提供的确切位置

我认为一个问题是关于 zIndex，因为每个标记都有相同的 zIndex (210)，因此所有标记都具有相同的 zIndex (210) 不能降落在他们自己的纬度上，但我对此感到很困惑，我尝试查看markerClusterGroup，但我对此一无所知

落在旧标记下方的标记：

              t.prototype.createCircle = function(t) {
                    L.HtmlIcon = L.Icon.extend({
                        options: {
                            /*
                            html: (String) (required)
                            iconAnchor: (Point)
                            popupAnchor: (Point)
                            */
                        },
                    
                        initialize: function (options) {
                            L.Util.setOptions(this, options);
                        },
                    
                        createIcon: function () {
                            var div = document.createElement('div');
                            div.innerHTML = this.options.html;
                            return div;
                        },
                    
                        createShadow: function () {
                            return null;
                        }
                    });
                    
                    const markerLocation = new L.LatLng(t.locationLatitude, t.locationLongitude);
                    
                    const HTMLIcon = L.HtmlIcon.extend({
                        options : {
                            html : "<div class=\"map__marker\"></div>",
                        }
                    });
                    
                    const customHtmlIcon = new HTMLIcon();
                    
                    const marker = new L.Marker(markerLocation, {icon: customHtmlIcon});
                    this.map.addLayer(marker);
                    

                    return this.createPopup(marker, t.locationName, t.valueRounded), marker
                }

Answer 1

我已经通过在 CSS 文件上将 relative 更改为 fixed 来解决它：

.map__marker {
  background: #ffffff;
  border-radius: 10px;
  height: 10px;
  position: fixed; //change from relative
  width: 10px;
}
.map__marker::before {
  -webkit-animation: blink 1s infinite ease-out;
          animation: blink 1s infinite ease-out;
  border-radius: 60px;
  box-shadow: inset 0 0 0 1px #ffffff;
  content: "";
  height: 10px;
  left: 50%;
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
}

@-webkit-keyframes blink {
  100% {
    height: 50px;
    opacity: 0;
    width: 50px;
  }
}

@keyframes blink {
  100% {
    height: 50px;
    opacity: 0;
    width: 50px;
  }
}