在MapBox中获取标记功能实例

时间:2018-10-29 01:02:33

标签: mapbox marker

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

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

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

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

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

2 个答案:

答案 0 :(得分:0)

对于可拖动的更改标记属性,请检查其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 + '")';
    }

答案 1 :(得分:0)

您是对的: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()之类的东西。)