javascript - 如何使传单 map 根据动态面板点击动态缩放到位置？

Question

我有一个显示兴趣点的传单 map 和一个信息面板，该面板根据分数对点进行排序，并根据 map 范围动态显示前 5 个点。我希望用户能够单击面板并缩放到 map 上的兴趣点。

下面的代码显示了我到目前为止所拥有的内容。

var info = L.control({position: 'bottomright'});

            info.onAdd = function (map) {
                this._div = L.DomUtil.create('div', 'info'); /
                this.update();
                return this._div;
            };

        var inBounds = {},
            listed5 =[],    
            bounds = map.getBounds();


            jsonlayer.eachLayer(function(marker) {
                if (bounds.contains(marker.getLatLng())) {

                    inBounds[marker.feature.properties.name] = marker.feature.properties.score ;


            }
            });
            var top5Sorted = Object.keys(inBounds).sort(function(a,b){return inBounds[b]-inBounds[a]});


            var listedtop5 = top5Sorted.slice(0,5);


            info.update = function (top) {

                this._div.innerHTML = '<div class="map-navigation"><h4>Title:</h4>'+ ('1. <a href="#" data-zoom="17" data-position="'+'">'+listedtop5[0] +'</a><br>' + '2. '+ listedtop5[1]+ '<br>' + '3. ' + listedtop5[2] + '<br>' + '4. '+listedtop5[3] + '<br>' + '5. '+ listedtop5[4]) + '</div>' ;
            };


            info.addTo(map);    




        map.on('move', function() {
        info.removeFrom(map)
        var inBounds = {},
            listed5 =[],    
            bounds = map.getBounds();


            jsonlayer.eachLayer(function(marker) {
                if (bounds.contains(marker.getLatLng())) {

                    inBounds[marker.feature.properties.name] = marker.feature.properties.score;
                    //inBounds.push(marker.feature.properties.name=marker.feature.properties.score);


            }
            });
            var top5Sorted = Object.keys(inBounds).sort(function(a,b){return inBounds[b]-inBounds[a]});


            var listedtop = top5Sorted.slice(0,5);

            info.update = function (top) {

                this._div.innerHTML = '<h4>Title:</h4>'+ ('1. <a href="#" data-zoom="12" data-position="48.06633,7.67268">'+listedtop[0] +'</a><br>' + '2. '+ listedtop[1]+ '<br>' + '3. ' + listedtop[2] + '<br>' + '4. '+listedtop[3] + '<br>' + '5. '+ listedtop[4]) ;
            };

            info.addTo(map);


        });
        document.querySelector('.map-navigation').onclick = function(abc) {
            var pos = abc.target.getAttribute('data-position');
            var zoom = abc.target.getAttribute('data-zoom');
            if (pos && zoom) {
                var locat = pos.split(',');
                var zoo = parseInt(zoom);
            map.setView(locat, zoo, {animation: true});
            return false;
            }
        };

Answer 1

您可以尝试使用panTo方法，结合 zoomIn 。请记住，panTo 方法接收 latlng 作为坐标参数，因此很可能您必须将 locat 转换为 LatLng 对象。

document.querySelector('.map-navigation').onclick = function(abc) {
        var pos = abc.target.getAttribute('data-position');
        var zoom = abc.target.getAttribute('data-zoom');
        if (pos && zoom) {
            var locat = pos.split(',');
            var zoo = parseInt(zoom);

        map.panTo(new LatLng(locat[0], locat[1]);
        map.zoomIn(zoo);
        return false;
        }
    };