在 MapBox 中获取标记特征实例答案

【问题标题】：Get Marker Feature Instance in MapBox在 MapBox 中获取标记特征实例
【发布时间】：2019-04-01 21:54:33
【问题描述】：

我是 mapbox GL JS 的新手，我正在关注这个例子： 在 Mapbox GL JS 中添加自定义标记 https://www.mapbox.com/help/custom-markers-gl-js/

假设我修改了上面的示例以包含 100 个不同的动物标记。特定标记添加到地图后如何更改其可拖动属性？

示例：更改狗标记的可拖动属性。

做这样的事情会很好： map.getMarker('dog').setDraggable(true);

在添加到地图后，我看不到任何查询添加到地图的标记或修改特定标记的属性（如 setLatLng、setDraggable）的方法。没有任何方法可以将标记集合添加到地图中。感谢您的帮助！

【问题讨论】：

我发现了你的问题。但是为什么在创建标记时不为标记分配变量作为参考呢？

标签： mapbox marker

【解决方案1】：

要更改标记属性，如可拖动，请检查其 api。即https://www.mapbox.com/mapbox-gl-js/api/#marker#setdraggable

Mapbox 自定义标记是由 html 元素构建的。如果你想改变自定义标记元素的视觉显示，你应该在 html 中更新它。例如，这里有 2 个函数用于创建带有图像背景的 div，然后将其作为图像标记返回

    /**
     *  @function CustomMarkerWithIcon(): constructor for CustomMarker with image icon specify
     *  @param lnglat: (LngLat) position of the marker
     *            map: (Map) map used on
     *           icon: (image) object for custom image
     */
    function CustomMarkerWithIcon(lnglat, map, icon) {
        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = 'url("' + icon.url + '")';
        el.style.backgroundSize = 'cover';
        el.style.width = icon.size.width;
        el.style.height = icon.size.height;
        el.style.zIndex = icon.zIndex;

        return new mapboxgl.Marker(el)
                    .setLngLat(lnglat)
                    .addTo(map);
    }


    /**
     *  @function ChangeMarkerIcon(): change marker icon
     *  @param marker: (marker) marker
     *           icon: (image) object for custom image
     */
    function ChangeMarkerIcon(marker, icon) {
        var el = marker.getElement();
        el.style.backgroundImage = 'url("' + icon.url + '")';
    }

【讨论】：

谢谢。但是，这个答案对我没有帮助，因为它没有解决我的问题，即在将特定标记添加到地图后如何设置它的可拖动属性。
嗨，我认为这很简单，因为 Mapbox 具有 setDraggable 功能（我在回答的第一部分提到了它）。查看您的问题，我认为您在将标记添加到地图后不会存储对标记的引用，因此您无法调用 setDraggable 并且您尝试找到不存在的 map.getMarker('dog') 之类的东西。更好的是，如果你可以在这里发布你的代码，帮助stackoverflow用户轻松给你答案

【解决方案2】：

你是对的：Mapbox GL JS doesn't store references to markers。但是，您可以在生成标记时将自己对标记的引用存储在数组中。

在下面的示例中，我循环遍历一组 GeoJSON 点特征并为每个点创建一个自定义 HTML 标记：

let markersArray = [];

geojson.features.forEach(feature => {
  // create a HTML element for each feature
  let el = document.createElement("div");
  el.className = "marker";
  el.innerHTML = `
    <img src="custom-marker.png" height="20px" width="20px" />
    <span class="marker-label">${feature.properties.name}</span>
  `;

  // make a marker for each feature and add to the map
  let marker = new mapboxgl.Marker({
    element: el,
    anchor: "top"
  })
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);

  // add to my own array in an object with a custom 'id' string from my geojson
  markersArray.push({
    id: feature.properties.id,
    marker
  });
});

这个id 字符串可以是任何你想要的。如果您希望能够查询其他内容，例如纬度/经度，您甚至可以存储其他参数：

markersArray.push({
  id: feature.properties.id,
  coordinates: feature.geometry.coordinates,
  marker
});

然后，如果我想访问标记的实例成员（如setDraggable），我可以使用Array.find() 返回与markersArray 中的搜索参数匹配的第一个实例：

let someIdQuery = "some-id";

let queriedMarkerObj = markersArray.find(
  marker => marker.id === someIdQuery
);
queriedMarkerObj.marker.setDraggable(true);

（请注意，Array.find() 仅返回数组中与您的条件匹配的第一个实例。如果您希望能够查询多个标记，请使用 Array.filter() 之类的内容。）

【讨论】：