带标记的OSM折线

时间:2019-11-29 11:28:41

标签: javascript leaflet openstreetmap polyline

我在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);
            }

对此有什么解决办法吗?

1 个答案:

答案 0 :(得分:2)

它比您制作的要简单得多。

// 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);