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

Question

在我使用传单api的应用程序中，我可以在它们之间放置两个门标记和折线。

在这里，我只是想找出将css图像放在折线上的方法，该折线应该适合两个标记。我知道图像有宽度和高度。

我相信必须有一些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并在那里放custom marker。