如何根據傳單開放街道地圖中的角色更改顏色

Question

var locations = [{ name:"bus", latitude:"12.56", longitude:"25.15, role: "traveler" },
                 { name:"bike", latitude:"13.56", longitude:"25.15, role: "traveler" },
                 { name:"John", latitude:"14.56", longitude:"25.15, role: "Developer" },
                 { name:"David", latitude:"12.56", longitude:"25.15, role: "Developer" },
                 { name:"Mango", latitude:"13.56", longitude:"25.15, role: "Fruit" },
                 { name:"Apple", latitude:"12.56", longitude:"25.15, role: "Fruit" }]



var map = L.map('mapid').setView([locations[0].latitude, locations[0].longitude], 8);
mapLink =
'<a href="#">ABC Corporation</a>';
    L.tileLayer(
   'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; ' + mapLink,
    maxZoom: 18,
    }).addTo(map);

for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([locations[i].latitude,locations[i].longitude])
    .bindPopup(locations[i].name)
    .addTo(map);

}

這是我的代碼，我想根據角色更改標記的顏色，現在如果添加具有相同緯度和經度的兩條記錄，我只能看到最新的一條。 我怎樣才能看到另一個標記

Answer 1

對於您的第一個問題“更改顏色”：

您無法更改標記的顏色，但可以用另一個圖標替換默認圖標。 https://leafletjs.com/examples/custom-icons/

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

for (var i = 0; i < locations.length; i++) {
    marker = new L.marker([locations[i].latitude,locations[i].longitude],{icon: greenIcon})
    .bindPopup(locations[i].name)
    .addTo(map);

}

要在同一點上查看兩個標記，您可以使用一個 Spiderfy 庫，例如： https : //github.com/jawj/OverlappingMarkerSpiderfier-Leaflet或https://github.com/Leaflet/Leaflet.markercluster

Answer 2

從我的代碼 - 返回一個圖標的功能，其顏色由“feature.properties.service”選擇：

function busservice(feature) {
  var service = feature.properties.service;
    var html = '<img class="arrow' + service +'" src="arrow-up-icon-29566.png">'     
    return new L.DivIcon({
        iconSize: 40,
         html: html});

    }

和一些 CSS - '26' 的黃色圖標 -

img.arrow26 {
    filter: invert(96%) sepia(50%) saturate(7493%) hue-rotate(1deg) brightness(102%) contrast(101%);
}