Question

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

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

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

做这样的事情会很好： map.getMarker（'dog'）。setDraggable（true）;

我看不到查询添加到地图上的任何标记或修改特定标记的属性（如setLatLng，setDraggable）的方法，这些属性已添加到地图后。没有方法来获取添加到地图的标记集合。感谢您的帮助！

Answer 1

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

Mapbox自定义标记由html元素构建。如果要更改自定义标记元素的视觉显示，则应在html中更新其显示。例如，这是我用来创建具有图片背景的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 + '")';
    }

Answer 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()之类的东西。）

在MapBox中获取标记功能实例

2 个答案: