如何更改 bindPopup 的行为

Question

大家好。

我买了一个漂亮的模板，传单是用来展示制作者的。 这是演示。 实际上，当您点击标记时，它会打开一个带有图片和一些温度值的窗口。

我想打开所有 windows。 当然，我要修改html，去掉图片和一些信息为GPS，只保留温度值。 目标是能够立即看到标记下方的温度框。 Optionaly，当我点击标记时，它会重定向到另一个页面，就像你点击图片一样。

我的第一个问题，我找不到与标记链接一起工作的 jacasvript 脚本。 这个想法是取消点击的效果，或者像我写的那样，在我们点击它之后打开图表页面而不是打开 windows。

• 我的第一个问题：如何找到更改标记上点击操作的方法
• 我的第二个问题（可能是取消第一个问题:)），我怎样才能改变 bindpopup 的行为？ 有没有办法“告诉”绑定弹出窗口，始终保持打开状态？
• 我的渴求问题：或者我们可以添加一两个额外的漂亮框，它们始终显示低于标记的温度，并保持 bindPopup 不变吗？ 那也不错

这是map第215行的代码

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// OpenStreetMap - Homepage
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

function createHomepageOSM(_latitude,_longitude,_nbField){


    setMapHeight();

    if( document.getElementById('map') != null ){
        
        var map = L.map('map', {
            center: [_latitude,_longitude],
            zoom: 18,
            scrollWheelZoom: false
        });
            
        //L.tileLayer('http://openmapsurfer.uni-hd.de/tiles/roadsg/x={x}&y={y}&z={z}', {
        L.tileLayer('http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
            //subdomains: '0123',
            maxZoom: 20,
            attribution: '<a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
        }).addTo(map);


        var markers = L.markerClusterGroup({
            showCoverageOnHover: false
        });

        function locateUser() {
            $('#map').addClass('fade-map');
            map.locate({setView : true})
        }
        $('.geo-location').on("click", function() {
            locateUser();
        });


        $.ajax({
            type: "POST",
            url: "sql/get_map.mysql.php",
            //data:'node=node1',
            //data:{node_id:"firstnode", node2:"secondnode", node3:"thirdnode", from:"from", to:"to"}, // Send parameter to get.php
            success: result,
            error: error,
            dataType: "json"
        });
       
        function error(data)
        {
            $('body').addClass('loaded');
            alert("Error getting datas from DB");
            console.log("Error getting datas from DB");
            console.log(data);
        }
        

        function result(data){
            console.info("data:",data);

            var allMarkers=[];
            var nhtml = '<img src="assets/img/property-types/vineyard.png">';

            for (var i = 0; i < data.properties.length; i++) {

                allMarkers.push(L.latLng(data.properties[i]['la'], data.properties[i]['lo']));


 
                //data.properties[i]['b2'] = 0;

                if((data.properties[i]['b1']>=data.properties[i]['se'] && data.properties[i]['b1'] < data.properties[i]['se']+1) ||
                    (data.properties[i]['b2']>=data.properties[i]['se'] && data.properties[i]['b2'] < data.properties[i]['se']+1) ||
                    (data.properties[i]['b3']>=data.properties[i]['se'] && data.properties[i]['b3'] < data.properties[i]['se']+1) ||
                    (data.properties[i]['b4']>=data.properties[i]['se'] && data.properties[i]['b4'] < data.properties[i]['se']+1)
                )
                {
                    nhtml = '<img src="assets/img/property-types/vineyard-orange.png">';
                }

               

                if(((data.properties[i]['b1'] < data.properties[i]['se']) && data.properties[i]['b1'] != null) ||
                    ((data.properties[i]['b2'] < data.properties[i]['se']) && data.properties[i]['b2'] != null) ||
                    ((data.properties[i]['b3'] < data.properties[i]['se']) && data.properties[i]['b3'] != null) ||
                    ((data.properties[i]['b4'] < data.properties[i]['se']) && data.properties[i]['b4'] != null)
                )
                {
                
                
                    nhtml = '<img src="assets/img/property-types/vineyard-red.png">';
                }
                else{
                    nhtml = '<img src="assets/img/property-types/vineyard.png">';
                }


                    

                var _icon = L.divIcon({
                    //html: '<img src="' + locations[i][7] +'">',
                    html: nhtml,
                    iconSize:     [40, 48],
                    iconAnchor:   [20, 48],
                    popupAnchor:  [0, -48]
                });

                var title = data.properties[i]['station'];
                var marker = L.marker(new L.LatLng(data.properties[i]['la'],data.properties[i]['lo']), {
                    title: title,
                    icon: _icon
                });

                var str ='';
                if(data.properties[i]['b1'] != null)
                {
                    str = str.concat('<div class="tag price"> ' + data.properties[i]['b1'] + '°C</div>');
                }
                if(data.properties[i]['b2'] != null)
                {
                    str = str.concat('<div class="tag price"> ' + data.properties[i]['b2'] + '°C</div>');
                }
                if(data.properties[i]['b3'] != null)
                {
                    str = str.concat('<div class="tag price"> ' + data.properties[i]['b3'] + '°C</div>');
                }
                if(data.properties[i]['b4'] != null)
                {

                    str = str.concat('<div class="tag price"> ' + data.properties[i]['b4'] + '°C</div>');
                }

                
                marker.bindPopup(
                    '<div class="property">' +
                        '<a data-field=' + data.properties[i]['id_field'] +'" data-station=' + data.properties[i]['id_station'] +'" href="charts.php?field='+ data.properties[i]['id_field'] +'">' +
                            '<div class="property-image">' +

                                '<img src="img/stations/station-' + data.properties[i]['id_station'] + '.jpg">' +
                            '</div>' +
                            '<div class="overlay">' +

                                '<div class="info">' +
                                      '<h3>' + data.properties[i]['station'] + '</h3>' +
                                    '<figure>' + data.properties[i]['da'] + '</figure>' +
                                     '<figure>' + data.properties[i]['la'] + ' ' + data.properties[i]['lo'] +'</figure>' +
                                    str +
                          
                                    '<div class="tag"> ' + data.properties[i]['se'] + '°C</div>' +
                                    
                                  
                                '</div>' +
                            '</div>' +
                        '</a>' +
                    '</div>'
                );
                               
            

                markers.addLayer(marker);
            }


            if(_nbField>1){
                bounds = L.latLngBounds(allMarkers);
                map.fitBounds(bounds,{ padding: [10, 10] });
            }

            map.addLayer(markers);
            map.on('locationfound', onLocationFound);

            function onLocationFound(){
                $('#map').removeClass('fade-map');
            }

            $('body').addClass('loaded');

            setTimeout(function() {
                $('body').removeClass('has-fullscreen-map');
            }, 1000);

            $('#map').removeClass('fade-map');
            
        

        }
}
}

• 我的最后一个问题，对于 firefox，id 可能“跟踪”javascript 操作？

如果我没有提供信息，请随时提出补充问题以更好地理解和帮助。

非常感谢

Answer 1

1. 您可以向标记添加click事件：

marker.on('click',(e)=>{
   console.log(e);
});

2. 显示所有弹出窗口：您需要将选项autoClose 和 closeOnClick设置为 false：

marker.bindPopup(content,{autoClose: false, closeOnClick: false});

3. 您可以使用工具提示：

marker.bindTooltip('5.3°C', {direction: 'bottom', permanent: true});

4. 我不明白你的意思，但听起来像是调试。 将developer console与调试器一起使用。

Answer 2

感谢您的回复和帮助

不幸的是 2. 不起作用。 没有区别。 我添加了 closeButton:true，这很有效，但这不是我需要的。

marker.bindPopup(
                    '<div class="property">' +
                        '<a data-field=' + data.properties[i]['id_field'] +'" data-station=' + data.properties[i]['id_station'] +'" href="charts.php?field='+ data.properties[i]['id_field'] +'#st-'+ data.properties[i]['id_station'] +'">' +
                            '<div class="property-image">' +

                                '<img src="img/stations/station-' + data.properties[i]['id_station'] + '.jpg">' +
                            '</div>' +
                            '<div class="overlay">' +

                                '<div class="info">' +
                                      '<h3>' + data.properties[i]['station'] + '</h3>' +
                                    '<figure>' + data.properties[i]['da'] + '</figure>' +
                                     '<figure>' + data.properties[i]['la'] + ' ' + data.properties[i]['lo'] +'</figure>' +
                                    str +
                          
                                    '<div class="tag"> ' + data.properties[i]['se'] + '°C</div>' +
                                    
                                  
                                '</div>' +
                            '</div>' +
                        '</a>' +
                    '</div>',{autoClose: true, closeOnClick: false, closeButton: true}
                );

我还尝试了带有工具提示的有趣选项。 在我添加的上面的代码下面

marker.bindTooltip('5.3°C', {direction: 'bottom', permanent: true});

但是那会打印一条错误消息

marker.bindTooltip 不是 function

是否还有我必须为 tooltop 添加的库，或者是否包含在 leafet 中。

（bindTootip 会很棒，足以满足我的需要）

感谢您的帮助干杯