向Mapbox Marker添加ID

时间:2016-04-20 01:15:46

标签: javascript jquery leaflet mapbox

我正在尝试向每个标记添加id,以便在使用JQuery而不是内置弹出功能单击标记时触发模态窗口。我想使用属性" id"填充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

2 个答案:

答案 0 :(得分:0)

您需要执行for循环。 I've updated your fiddle with the correct code循环浏览geojson变量的长度,添加一个名为propertiesID的新字段,然后将其设置为properties加上id字段,这样您就可以了得到properties1properties2

代码更改可以在小提琴的第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)
}

答案 1 :(得分:-1)

可能不是一个有效的解决方案,但现在是。

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;
  }
}