Leaflet：通过单击缩放到标记 function

Question

Im using a leaflet map with a some markers on it. i also have a sidebar where i can see the marker's name there and if i click the marker's name, the map will zoom to the lnglat of the marker. its working already but my problem is that when i refresh the page, and choose a marker in the sidebar, it will zoom to the marker but the marker's icon is not there but when i click the marker in the sidebar again, then the markers icon is showing.

i have this click function:

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

    var events = findMapNo(no).eventData[deviceID].events;
    console.log("events: ",events)
    if( events.length>0 ){
        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(20);
        findMapNo(no).map.panTo(latLng); 

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

i have this function for markers. i tried putting the addTo(mapContnr.map) to the marker variable and its works, but i cant use the addTo(mapContnr.map) since i'm using marker cluster.

var markersLayer, markersCluster, tooltips = [];
function createMarker(data, no, action){

var mapContnr = findMapNo(no);
var markers = [];
var markers2 = [];  //will append on arrayMap and the keys is deviceID    
var bounds = L.latLngBounds();  // Instantiate LatLngBounds

clearElements(no); 

markersCluster = L.markerClusterGroup({
    spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
    removeOutsideVisibleBounds: true,
    chunkedLoading: true
});

for(var x in data){
    if(!data[x].events||data[x].events.length<1){ continue; }
    var latest = data[x].events.length-1;
    var lat = parseFloat(data[x].events[latest][4]);
    var lon = parseFloat(data[x].events[latest][3]);
    var accuracy = parseFloat(data[x].events[latest][5]);
    var deviceID = data[x].deviceID;

    if(lat!=0||lon!=0){
        var latLng = L.latLng(lat, lon);

        var iconSettings = getAssetSetup(x);
        console.log(iconSettings);

        var height = iconSettings.iconSizePx.h;
        if(!iconSettings){ continue; };
        //::customicon
        var customIcon = L.icon({
            iconUrl: iconSettings.iconURL,        
            iconSize: [iconSettings.iconSizePx.w, iconSettings.iconSizePx.h], 
            popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor  
        });


        //::marker label/tooltip
        var tooltp = L.tooltip({
                        permanent: true,
                        className: 'Vlabel',
                        direction: 'right',
                        offset: [-6, height/2+11], 
                     }).setContent("<span>"+findVehicleDetails(deviceID).label+"</span>");

        tooltips.push(tooltp);
        //::popup/infowindow
        var temp_content = createPopupContent(x, latest, no);
        temp_content += "<div class='menu_logo' style='margin-top:10px; min-height: 15px;'>";
        temp_content += "<img src='"+base_url+"assets/img/zoom-logo.png' style='width:18px; height:18px;' class='marker_menu_logo' onclick='zoomMarker("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+no+")'><div class='verticalLine'></div>";
        temp_content += "<img src='"+base_url+"assets/img/route-logo.png' style='width:25px; height:10.55px; margin-top: 4px;' class='marker_menu_logo' onclick='getTrail("+deviceID+","+no+")'><div class='verticalLine'></div>";
        temp_content += "<img src='"+base_url+"assets/img/direction-logo.png' style='width:18px; height:18px; margin-top: -2px;' class='marker_menu_logo' onclick='leaf_direction("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+no+")'><div class='verticalLine'></div>";
        temp_content += "<img src='"+base_url+"assets/img/streetview-logo.png' style='width:18px; height:18px;' class='marker_menu_logo' onclick='streetView("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+data[x].events[latest][8]+","+no+")'>";
        temp_content += "</div>";

        var popup = L.popup({
                        minWidth: 200,
                        closeOnClick: true,
                        minHeight: 200,
                        offset: [0, -height/4]
                     }).setContent(temp_content);

        var marker = new L.marker(latLng, {  icon: customIcon}).bindTooltip(tooltp).bindPopup(popup).openPopup();

        bounds.extend(marker.getLatLng());                

        markers.push(marker);
        markersCluster.addLayer(marker);
    }//::END LonLat not 0

} //::END FOR LOOP
//var group = L.featureGroup(markers);
//mapContnr.map.fitBounds(group.getBounds());

markersLayer = L.layerGroup(markers);
//markersLayer.addTo(mapContnr.map);  //dont add since there's already a marker cluster layer  

markersCluster.on('clusterclick', function (a) {
    if (mapContnr.map.getZoom() >= mapContnr.map.options.maxZoom) {
        a.layer.spiderfy();
    } else{
        a.layer.getBounds()
    }
});
//mapContnr.map.fitBounds(markersCluster.getBounds());
mapContnr.map.addLayer(markersCluster);  

mapContnr.markers = markers;
mapContnr.markerLayers = markersLayer; 
mapContnr.markersClusters = markersCluster;


if(mapContnr.markers.length > 1){
    mapContnr.map.fitBounds(bounds);   
    mapContnr.bounds = bounds;
}

if(mapContnr.markers.length == 1){
     //mapContnr.map.setZoom(15);
     //getLatLng();
    var latlng = mapContnr.markers[0].getLatLng();        
    zoomMarker(latlng.lat,latlng.lng,no);
}

}//END :: createMarker

Answer 1

Try this fitbounds() method

You can check here with working JS fiddle .

Code snippet

document.getElementById('map').style.height = window.innerHeight + 'px';

const map = L.map("map").setView([48.86, 2.35], 12);

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

const myFeatureGroup = L.featureGroup().addTo(map).on("click", markerClick);

for (let i = 0; i < 20; i++) {
  L.marker(getRandomLatLng()).addTo(myFeatureGroup).bindPopup(`<b>Marker number ${i}</b>`);
}

function markerClick(event) {
  map.fitBounds([event.latlng])
}

function getRandomLatLng() {
  return [48.86 + 0.1 * Math.random() - 0.05, 2.35 + 0.1 * Math.random() - 0.05];
}