带标记的 OSM 折线

Question

我在 OSM 上使用此代码有一些自定义折线

var polyline1 = [
        [44.772142, 17.208980],
        [44.774753, 17.207644],
        [44.773964, 17.199587],
        [44.770823, 17.199207],
        [44.771399, 17.195699],
    ];

    for (var i = 0; i < polyline1.length; i++) {
                var polyline = L.polyline(polyline1, {
                    color: 'red'
                }).addTo(map);;
            }

我需要在所有这些坐标上带有弹出窗口的标记，此代码无法与其他代码一起使用：

for (var i = 0; i < polyline1.length; i++) {
                var marker = L.marker([polyline1[i][1],polyline1[i][2]])
                .bindPopup(polyline1[i][0])
                .addTo(map);
            }

有解决办法吗？

Answer 1

比你做的简单多了。

// Define some custom icons

var icon1 = L.icon(...);
var icon2 = L.icon(...);
var icon3 = L.icon(...);
var icon4 = L.icon(...);
var icon5 = L.icon(...);


var icons = [ icon1, icon2, icon3, icon4, icon5];


// Define the points

var polyline1 = [
        [44.772142, 17.208980],
        [44.774753, 17.207644],
        [44.773964, 17.199587],
        [44.770823, 17.199207],
        [44.771399, 17.195699],
    ];

// Add a marker at each point

polyline1.forEach(function(LatLng, i) {
    L.marker(LatLng, {icon: icons[i]}).addTo(map);
});

// Add a polyline

L.polyline(polyline1, { color: 'red' }).addTo(map);

带标记的 OSM 折线

OSM polyline with markers

javascript

leaflet

openstreetmap

polyline