将地图从列表行传单地图拖动到选定的标记

Posted 2023-05-06

【中文标题】将地图从列表行传单地图拖动到选定的标记

【英文标题】：Dragging map to the selected marker from the list line leaflet map

【发布时间】：2021-10-24 18:20:30

【问题描述】：

如果我在代理列表中，并且每次点击代理行，它都会在地图上滑动到标记。

在这种情况下，它会在地图上跳跃而不是拖动：

$("#myTable tr").hover(function () 
        var id = $(this).data("id");
        $.get("../get_info.php",  id: id , function (response) 
  
            var json = JSON.parse(response);
             mymap.panTo(new L.LatLng(json["lat"], json["lon"]));
             mymap.setZoom(15);
           
        );
    );

这段代码解决了我的问题

map.flyTo([json["lat"], json["lon"]], 10, 
                animate: true,
                duration: 1.5
            ); 

但现在，我想在缩放后自动打开弹出窗口

【参考方案1】：

我在我的一个项目中遇到了我的情况，我做如下：

<script>
    var lat = 32.699852569257246;
    var lon = -72.337867895135915;
    var zoom = 4;
    var map;
    var markers = [];

    function addMarker(id, lat, lng, p) 
        var myLatLng = new L.LatLng(lat, lng);
        var marker = L.marker(myLatLng,  alt: id ).addTo(map).bindPopup(p);
        markers.push(marker);
    

    function ShowOnMap(id) 
        for (var i in markers) 
            var markerID = markers[i].options.alt;
            if (markerID == id) 
                map.setView(markers[i].getLatLng(), 16);
                markers[i].openPopup();
            ;
        
    

    $(document).ready(function () 

        // Create Map
        map = L.map('map', 
            center: [lat, lon],
            zoom: zoom,
        );

        L.tileLayer('https://s.tile.osm.org/z/x/y.png', 
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        ).addTo(map);

        // Add marker of each Physician Department
        $('input[name=DepartmentPhysicianId]', '#steps-uid').each(function () 
            addMarker($(this).val(), $(this).data('lat'), $(this).data('lon'), $(this).data('description'));
        );

        // Show popup when user click on each Physician Department
        $('input[name=DepartmentPhysicianId]', '#steps-uid').on('change', function () 
            ShowOnMap($(this).val());
        );

        var group = new L.featureGroup(markers);
        map.fitBounds(group.getBounds(),  padding: [50, 50] );
    );

</script>