ซูมไปที่ตำแหน่ง Marker เมื่อคลิก -Leaflet
Aug 20 2020
ฉันกำลังแสดงเครื่องหมายบนแผนที่จากไฟล์ geojson ในรหัสปัจจุบันเมื่อฉันวางเมาส์เหนือเครื่องหมายฉันสามารถดูคุณสมบัติในป๊อปอัป ฉันต้องการเพิ่มการบินไปยังหรือขยายตำแหน่งที่แน่นอนของเครื่องหมายเมื่อคลิกที่เครื่องหมายฉันจะบรรลุสิ่งนั้นได้อย่างไร
cityMarker = new L.geoJson(city, {
onEachFeature: function(feature, layer) {
//if (feature.properties && feature.properties.name) {
if ( feature.properties.name) {
layer.bindPopup(feature.properties.name, {closeButton: false, offset: L.point(0, -2)});
layer.on('mouseover', function() { layer.openPopup(); });
layer.on('mouseout', function() { layer.closePopup(); });
}
},
pointToLayer: function (feature, latlng) {
var cityIcon = new L.Icon({
iconSize: [20, 20],
iconAnchor: [13, 27],
popupAnchor: [1, -20],
iconUrl: './css/img/marker-icon-red.png'
});
//return L.circleMarker(latlng);
return L.marker(latlng,{icon: cityIcon});
}
});
map.addLayer(cityMarker);
คำตอบ
1 poonampatel Aug 20 2020 at 13:31
ฉันหาวิธีแก้ปัญหาได้แล้วฉันเพิ่มที่นี่
cityMarker.on('click', function(e) {
map.setView(e.latlng, 16);
});
1 peeebeee Aug 20 2020 at 14:20
สำหรับเอฟเฟกต์การแพน / ซูมแบบเคลื่อนไหวที่ราบรื่นดีมากกว่าการกระโดดให้ใช้ flyTo
cityMarker.on('click', function(e) {
map.flyTo(e.latlng, 16);
});