在MapBox中获取标记功能实例 [英] Get Marker Feature Instance in MapBox

问题描述

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

I'm new to mapbox GL JS and am following this example: Add custom markers in Mapbox GL JS https://www.mapbox.com/help/custom-markers-gl-js/

比方说，我将上面的示例修改为包括100种不同的动物标记.将特定标记添加到地图后，如何更改其可拖动属性?

Let's say I modify the example above to include 100 different animal markers. How do I change the draggable property of a specific marker after it has been added to the map?

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

Example: Change the draggable property of the dog marker.

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

It would be nice to do something like this: map.getMarker('dog').setDraggable(true);

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

I don't see a way to query any of the markers added to my map or modify a specific marker's properties like setLatLng, setDraggable after they have been added to a map. There is no method to get the collection of markers added to a map. Thanks for any help!

推荐答案

您是对的:Mapbox GL JS

You're right: Mapbox GL JS doesn't store references to markers. However, you can store your own references to the markers in an array at the time that you generate them.

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

In this example below, I am looping over a set of GeoJSON point features and creating a custom HTML marker for each:

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字符串可以是您想要的任何字符串.如果您想查询其他内容，甚至可以存储其他参数，例如纬度/经度:

This id string can be whatever you want. You can even store other parameters if you want to be able to query other things, like latitude/longitude:

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

然后，如果我想访问标记的实例成员(例如 setDraggable )，我可以使用

Then, if I want to access the marker's instance members (like setDraggable), I can use Array.find() to return the first instance that matches my search parameters in markersArray:

let someIdQuery = "some-id";

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

(请注意，Array.find()只是返回数组中符合您条件的第一个实例.使用类似

(Note that Array.find() just returns the first instance in the array that matches your condition. Use something like Array.filter() if you want to be able to query for more than one marker.)

这篇关于在MapBox中获取标记功能实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！