为 Mapbox 标记添加 ID

Question

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

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

Answer 2

你需要做一个for循环。 I've updated your fiddle with the correct code 循环遍历 geojson 变量的长度，添加一个名为 propertiesID 的新字段，然后将其设置为 properties 加上 id 字段，这样您得到 properties1、properties2 等

可以在 fiddle

的第 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 3

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

这是创建标记的代码：

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

我为它添加了一个 ID：

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

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

#my-marker {
  cursor: pointer;
}

为 Mapbox 标记添加 ID

Adding an ID to Mapbox Marker

javascript

jquery

leaflet

mapbox