mapbox - 在 MapBox 中获取标记特征实例

问题描述

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

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

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

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

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

标签： mapboxmarker

对于可拖动的更改标记属性，请检查其 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 - 在 MapBox 中获取标记特征实例

问题描述

解决方案

推荐阅读