我是mapbox GL JS的新手,并且正在关注以下示例: 在Mapbox GL JS中添加自定义标记 https://www.mapbox.com/help/custom-markers-gl-js/
假设我修改了上面的示例,以包含100种不同的动物标记。将特定标记添加到地图后,如何更改其可拖动属性?
示例:更改狗标记的可拖动属性。
做这样的事情会很好: map.getMarker('dog')。setDraggable(true);
我看不到查询添加到地图上的任何标记或修改特定标记的属性(如setLatLng,setDraggable)的方法,这些属性已添加到地图后。没有方法来获取添加到地图的标记集合。感谢您的帮助!
答案 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()
之类的东西。)