單張自定義標記圖標縮放以縮放

Question

我使用Leaflet繪制OpenStreetMap並使用自定義圖標標記附加它

var mymap = L.map('mapid').setView([x, y], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        maxZoom: 18,
        id: ID,
        accessToken: accessToken
    }).addTo(mymap);

    var busIcon = new L.Icon({
        iconUrl: 'images/marker/bus.png',
        // shadowUrl: 'images/leaflet/marker-shadow.png',
        iconSize: [12, 12],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        // shadowSize: [41, 41]
    });

    var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);

    mymap.on('zoomed', function() {
        var currentZoom = mymap.getZoom();
        busIcon = new L.Icon({
            iconUrl: 'images/marker/bus.png',
            iconSize: [mymap.getZoom*2, mymap.getZoom*2],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
        });
        marker.setIcon(busIcon);
    });

現在我想根據縮放級別調整標記圖標的大小。 我上面的代碼有問題。 我該怎么辦？ 如果marker是CircleMaker ，則有一個setRadius函數可供我輕松處理。 但在這種情況下，標記是一個自定義圖標，我嘗試如上，但失敗了。 怎么解決？

Answer 1

你有一個錯字：縮放應該是zoomend

map.on('zoomend', function() {
});

http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview

除此之外，我會創建並保持圖標不受zoomend回調的影響。

實際上，每次縮放變化時，您的代碼都會創建一個圖標。

Answer 2

正如YaFred所說，有一些像zoomend這樣的拼寫錯誤，還有mymap.getZoom應該是mymap.getZoom()

我對這個老問題做了一個新的答案，提出了一個更有效的解決方案。 您可以在圖標中添加className （請參閱傳單文檔 ）。 這意味着我們可以通過CSS編輯圖標的高度和寬度！ 在你的zoomend函數中，只需調用這個JQuery，而不是創建一個新圖標：

var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom}); 

對於更大量的標記，這將顯着提高您的性能，如此stackoverflow問題中所述： Leaflet自定義圖標在縮放時調整大小。 性能圖標與divicon