如何使用 css 在两个标记之间放置图像：传单

Question

在我使用 leaflet api 的应用程序中，我可以放置两个门标记并在它们之间绘制多段线。

在这里，我只是想找出将 css 中的图像放在应该适合两条 markers.I 的折线上的方法，知道图像具有宽度和高度。

我相信一定有一些 css 技巧可以做到这一点，尽管由于对传单的了解有限，我不能使用填充图案方法。

脚本（在它们之间放置两个标记和线）

var polylineGate2 = new L.Polyline([], { color: 'yellow' });
            function gatePlace2(e) {
                // New marker on coordinate, add it to the map
                new L.Marker(e.latlng, { icon: gateIcon, draggable: false }).addTo(currentFeatureGroup);
                // Add coordinate to the polyline
                polylineGate2.addLatLng(e.latlng).addTo(currentFeatureGroup);
                var decorator = L.polylineDecorator(polylineGate2, {
                    patterns: [
                        // define a pattern of 10px-wide dashes, repeated every 20px on the line
                        { offset: 5, repeat: '20px', symbol: new L.Symbol.dash({ pixelSize: 4 }) }
                    ]
                }).addTo(currentFeatureGroup);
                map.off('click', gatePlace2);
                polylineGate2 = new L.Polyline([], { color: 'pink' });
            }

我正在寻找解决方案，但没有在线获得帮助，如果有人知道此类事情，请提供帮助。

Answer 1

我不会为此使用 CSS。

相反，我会calculate the coordinates of the middle point and put a custom marker那里。

如何使用 css 在两个标记之间放置图像：传单

How to place image between two marker using css : leaflet

leaflet

dc.leaflet.js

angular-leaflet-directive