javascript - 为 Mapbox 标记添加 ID

Question

我正在尝试向每个标记添加一个 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

Answer 1

这是使用 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;
}