向Mapbox标记添加ID

Question

我试图向每个标记添加一个id，以便在使用JQuery而不是内置的弹出功能单击标记时触发一个模态窗口。我想用属性"id“填充id。

我知道我需要递归地遍历并添加ids，但我不想知道如何实现这一点。我该怎么做呢？

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循环。我用正确的密码更新了你的小提琴循环遍历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

这是一个使用Mapbox的快速攻击。我创建了一个默认标记，只想要一种快速更改光标的方法，而不需要进行额外的编码。

下面是创建标记的代码：

this.marker = new mapboxgl.Marker({
  draggable: true,
  color: "#D80739",
}).setLngLat(centre);

我在上面添加了一个ID：

this.marker._element.id = "my-marker";

然后使用CSS ID选择器进行样式设置：

#my-marker {
  cursor: pointer;
}

Answer 3

也许不是一个有效的解决方案，但它在这里。

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