小冊子：LayerGroup的彈出窗口不能修改寬度/高度

我的目標是爲已在另一個LayerGroup中定義的每個Marker添加額外的彈出窗口。然後這些Popups應通過小冊子LayerControl進行控制，同時顯示/隱藏所有附加彈出窗口。小冊子：LayerGroup的彈出窗口不能修改寬度/高度

正如你所鏈接的圖片中看到，它的偉大工程。我的問題是，我現在想減少這些彈出窗口的大小，因爲它們對於它們包含的小信息來說是相當大的。

下面是使用功能附加在彈出窗口到另一個LayerGroup我的企圖，並使用單張PopupOptions：maxWidth和maxHeight，但它並沒有在所有的工作。

我注意到它的工作原理，如果我添加新的彈出窗口的地圖直接如預期，但我需要能夠控制從LayerControl的LayerGroup。我是否必須通過CSS使用黑客來實現我的目標？我現有的代碼沒有簡單的解決方案嗎？

layers.conf.ts

const markers: L.Marker[] = GlobalMapService.jsonToArray(globalMapService.markersLayer.getLayers()); 
    const labelsLayer = L.layerGroup(null); // LayerGroup containing my Popups 

    markers.forEach((marker, index) => { 
    L.popup({ 
     offset: [2, -25], // This works (needed for Angular integration). 
     closeButton: false, // This works (as you can see). 
     maxWidth: 30,  // This doesn't work at all with a LayerGroup. 
     maxHeight: 25  // Same as above. 
    }) 
     .setLatLng(marker.getLatLng()) 
     .setContent('ID : ' + (index + 1)) 
     .addTo(labelsLayer); 
    }); 

    return labelsLayer;

layers.conf.ts

const overlays: L.Control.LayersObject = { 
    'Labels': labelsLayer 
    }; 
    globalMapService.overlays = overlays;

LeafletMapComponent.ts

const map = L.map(this.mapEl.nativeElement, { 
    center: [51.505, -0.09], 
    zoom: 7, 
    layers: [ 
     this.leafletService.baseLayers['Standard'], // BaseLayer 
    ] 
    }); 

    L.control.layers(this.leafletService.baseLayers, this.globalMapService.overlays) 
    .addTo(map);

來源

2017-10-05 Alex Beugnet

你可以做的是添加自定義CSS類的彈出：

markers.forEach((marker, index) => { 
    L.popup({ 
     className: 'small-popup', 
     offset: [2, -25], 
     closeButton: false 
    }) 
    .setLatLng(marker.getLatLng()) 
    .setContent('<div class="popup">ID : ' + (index + 1) + '</div>') 
    .addTo(labelsLayer); 
});

我添加了一個div您的彈出裏面，你不需要它，但你可以有也多控制inside您的彈出窗口。

然後添加這個CSS：

.small-popup { 
    max-width: 30px; 
    max-height: 25px; 
}

這就是我所做的事情對我來說是一個很好的解決方案，因爲你可以很容易事後編輯你的CSS。

來源

2017-10-06 07:22:55 Baptiste

這是我最終使用的，但其實有點難過...... –

對不起，讓你感到傷心......你真的沒有在你的控制檯有任何錯誤？ – Baptiste

沒有任何，它現在與一個類的罰款 –

小冊子：LayerGroup的彈出窗口不能修改寬度/高度

回答

相關問題