Листовка: разные цветовые маркеры для разных координат

Question

Я делаю интерактивную карту с лифлетом. У меня есть маркеры на карте (основанные на их долготе и координатах широты), и я хочу, чтобы некоторые маркеры имели другой цвет, чем другие. Например, некоторые координаты я даю ему оценку «10», и я хочу, чтобы она была розовой, а другие маркеры - «5», и я хочу дать маркеры у них красный.

У меня есть marker.js файл:

var myIcon = L.icon({ 
    iconUrl: 'icon_ping.png', 
    iconSize: [20, 15], 
    iconAnchor: [5, 23], 
    popupAnchor: [0, -11] 
}); 


for (var i=0; i < markers.length; ++i) 
{ 
L.marker([markers[i].lat, markers[i].lng], {icon: myIcon}) 
    .bindPopup('<a target="_blank">' + markers[i].name + '<br>' + markers[i].address + '<br>' +'Score: ' + markers[i].score + '</a>') 
    .addTo(map); 
} 

У меня также есть coordinates.json файл, содержащий координаты и мои оценки

markers = [ 
    { 
    "name": "Place", 
    "address": "123, TX", 
    "score": "10", 
    "lat": 12.123, 
    "lng": 23.234 
    } 

    ... 

]; 

В основном я просто хочу маркеры одного и того же чтобы иметь одинаковый цветной маркер. Я думал, что мне нужно создать еще var myIcon_2 и поставить оператор if внутри цикла for? Будет ли это работать или есть еще один лучший способ приблизиться к этому?

Спасибо.

Answer 1

, как вы описали это будет способ сделать это .. Однако, чтобы избежать дублирования много кода и т.д., вы должны использовать тройной оператор, чтобы определить иконку, то есть:

var myIcon = L.icon({ 
    iconUrl: 'icon_ping.png', 
    iconSize: [20, 15], 
    iconAnchor: [5, 23], 
    popupAnchor: [0, -11] 
    }), 
    myIcon2 = L.icon({ 
    iconUrl: 'icon_ping2.png', 
    iconSize: [20, 15], 
    iconAnchor: [5, 23], 
    popupAnchor: [0, -11] 
    }); 


for (var i=0; i < markers.length; ++i) 
{ 
    var icon = markers[i].score === 10 ? myIcon2 : myIcon; 

    L.marker([markers[i].lat, markers[i].lng], {icon: icon}) 
     .bindPopup('<a target="_blank">' + markers[i].name + '<br>' + markers[i].address + '<br>' +'Score: ' + markers[i].score + '</a>') 
     .addTo(map); 
}