简体   繁体   English

Leaflet:单击时将标记放在前面

[英]Leaflet: bring the marker to front when click

is there a method that bring the marker to front?有没有一种方法可以将标记放在前面? the zoomMarker is the details of markers and when details is clicked, (the max zoom is 11 so the markers is nearer to each other and the label cant read) it will panTo, but since the max zoom is 11, it cant see where there is so much marker. zoomMarker 是标记的详细信息,单击详细信息时, (最大缩放为 11,因此标记彼此更近,label 无法读取)它会平移到,但由于最大缩放为 11,它看不到那里是这么多的标记。 (this is a leaflet windy map, thats why the max zoom is only 11) (这是一个 leaflet 有风的 map,这就是为什么最大变焦只有 11)

$("#mapContainer").on("click",".zoomMarker",function(){
    var zoom;
    var zoomValueIn;
    var no = $(this).attr("mapNo");
    var deviceID = $(this).attr("deviceID");

    var events = findMapNo(no).eventData[deviceID].events;
    findMapNo(no).map.setZoom(19);

    if( events.length>0 ){
        var eventsIndex = findMapNo(no).eventData[deviceID].events.length-1;
        var temp_content = createPopupContent(deviceID, eventsIndex, no);
        var lat = events[events.length-1][4];
        var lng = events[events.length-1][3];
        var latLng = new L.latLng(lat, lng);

        findMapNo(no).map.setZoom(19);
        var Oldzoom = findMapNo(no).map.getZoom();

        popup = L.popup({
            permanent: true,
            autoPan: false,
            minWidth: 200,
            closeOnClick: true,
            minHeight: 200,
            offset: [0, -12]})
            .setLatLng(latLng)
            .setContent(temp_content);

        if(Oldzoom == Oldzoom){
            findMapNo(no).map.removeLayer(markersCluster);
            findMapNo(no).map.addLayer(markersLayer); 
            findMapNo(no).map.panTo(latLng); 
            //should bring to front the marker
            if(findMapNo(no).map.hasLayer(markersLayer)){
                findMapNo(no).map.openPopup(popup);
            }
        }

        findMapNo(no).map.on("zoomend", function (e) {
            zoom = this.getZoom();
            var diff = Oldzoom - zoom; 
            if(diff > 0 || diff < 0){ 
                if(diff > 0){
                    findMapNo(no).map.closePopup(popup);
                }else{  
                    if(zoom == zoom){
                        if(diff < 0){ 
                            diff = diff - 1;
                        }else if(diff > 0){
                            diff = diff + 1;
                        }else if(diff == 0){ 
                            //should bring to front the marker
                            findMapNo(no).map.panTo(latLng); 
                            findMapNo(no).map.openPopup(popup);
                        } 
                    }
                    Oldzoom = zoom;
                    //should bring to front the marker
                    findMapNo(no).map.removeLayer(markersCluster);
                }
                findMapNo(no).map.removeLayer(markersLayer);
                findMapNo(no).map.addLayer(markersCluster);
            } 

            Oldzoom = zoom;            
        });
    }else{
        toaster("Marker No Location","warning");
    }
});

You can use the option riseOnHover by mouseover the marker comes to front.您可以通过将鼠标悬停在标记前面来使用选项riseOnHover

var marker = L.marker([lat,lng], {riseOnHover: true});      
marker.addTo(map);

I had the same question.我有同样的问题。 I read that the Markers has no bringToFront() option, because they are directed by north to south.我读到 Markers 没有 BringToFront() 选项,因为它们是由北向南引导的。 A Marker more in the north are on the top北部的一个标记在顶部

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM