Добавление идентификатора в маркер Mapbox

Question

Я пытаюсь добавить id для каждого маркера, чтобы я мог запускать модальное окно при нажатии маркера с помощью JQuery вместо встроенных всплывающих функций. Я хочу заполнить id свойством «id».

Я знаю, что мне нужно рекурсивно пройти и добавить идентификаторы, но я не о том, как добиться этого. Как мне это сделать?

var geojson = [{ 
    "type": "Feature", 
    "geometry": { 
    "coordinates": [-86.781602, 36.162664], 
    "type": "Point" 
    }, 
    "properties": { 
    "id": 001, 
    "title": "POI #1", 
    "image": "http://lorempixel.com/image_output/city-h-c-524-822-2.jpg", 
    "filter-1": true, 
    "filter-2": false, 
    "filter-3": false, 
    "filter-4": true, 
    "filter-5": false, 
    "marker-color": "#1087bf", 
    "marker-size": "medium", 
    "marker-symbol": "" 
    } 
}]; 

JSFiddle

Answer 1

Вы должны сделать for петлю. I've updated your fiddle with the correct code для цикла по длине вашей geojson переменной, добавить новое поле под названием propertiesID, затем устанавливает, что properties плюс id поле, так что вы получите properties1, properties2 и т.д.

Изменение кода можно найти на линии 90 от скрипки

for (var i=0; i<geojson.length; i++){ 
    geojson[i].properties.propertiesID = "properties" + geojson[i].properties.id 

    //Logs out each object's properties in your array 
    console.log(geojson[i].properties) 
} 

Answer 2

не может быть эффективным решением, но здесь это.

JSFiddle

for (var key in geojson) { 
    if (geojson.hasOwnProperty(key)) { 
    // console.log(key + " -> " + geojson[key]); 
    var poi = geojson[key]; 
    var marker_id = poi.properties.id; 
    var latitude = poi.geometry.latitude; 
    var longitude = poi.geometry.longitude; 
    var filterOne = poi.properties.filterOne; 

    // render marker 
    markers[poi.properties.id] = L.marker([latitude, longitude],{ 
     filterOne: poi.properties.filterOne, 
     filterTwo: poi.properties.filterTwo, 
     filterThree: poi.properties.filterThree, 
     name: poi.properties.name 
    }).addTo(map); 

    //assign id 
    markers[poi.properties.id]._icon.id = poi.properties.id; 
    } 
}