[英]Leaflet: zooming to marker by a click function
我使用 leaflet map 上面有一些标记。 我还有一个侧边栏,在那里我可以看到标记的名称,如果我单击标记的名称,map 将缩放到标记的 lnglat。 它已经工作了,但我的问题是,当我刷新页面并在侧边栏中选择一个标记时,它会缩放到标记但标记的图标不存在但是当我再次单击侧边栏中的标记时,然后是标记图标正在显示。
我有这个点击 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");
}
});
我有这个 function 用于标记。 我尝试将 addTo(mapContnr.map) 放入标记变量及其工作,但我不能使用 addTo(mapContnr.map),因为我正在使用标记簇。
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
试试这个fitbounds()方法
您可以在此处使用工作JS fiddle检查。
代码片段
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: '© <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];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.