leaflet - 如何更改 bindPopup 的行为

问题描述

大家好。

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

我想打开所有的窗户。当然，我要修改html，去掉图片和GPS的一些信息，只保留温度值。目标是能够立即看到标记下方的温度框。可选地，当我点击它重定向到另一个页面的标记时，你点击图片也是如此。

我的第一个问题，我找不到与标记链接一起使用的 jacasvript 脚本。我们的想法是取消点击的效果，或者正如我所写，在我们点击它之后打开图形页面而不是打开窗口。

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

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 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，是否可以“跟踪”javascript 操作？

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

非常感谢

标签： leafletpopup

感谢您的回复和帮助

不幸的是 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 不是函数

是否还有我必须为工具顶部添加的库，或者包含在传单中。

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

感谢您帮助干杯

leaflet - 如何更改 bindPopup 的行为

问题描述

解决方案

推荐阅读