[英]Zoom to Marker location on click -Leaflet
我在 geojson 文件中的 map 上顯示標記。 在當前代碼中,當我 hover 超過標記時,我可以在彈出窗口中看到屬性。 我想在單擊標記時添加飛行或放大標記的確切位置。我該如何實現。
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);
我已經想出了解決方案,所以我在這里添加它。
cityMarker.on('click', function(e) {
map.setView(e.latlng, 16);
});
要獲得平滑的動畫平移/縮放效果而不是跳躍,請使用flyTo
cityMarker.on('click', function(e) {
map.flyTo(e.latlng, 16);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.