用于创建一个标记组件
示例:
const el = document.createElement('div');
el.className = 'marker';
el.textContent ='标注'
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
API配置
名称 | 描述 |
---|---|
anchor 默认: 'center' | 一个字符串,指示标记中应通过Marker#setLngLat定位最靠近坐标集的部分。选项有'center' ”、“'top'``'bottom'``'left'``'right'``'top-left'``'top-right' ”、“'bottom-left' 和'bottom-right' ”。 |
clickTolerance default: 0 | 用户在单击标记时可以移动鼠标指针的最大像素数,使其被视为有效单击(而不是标记拖动)。默认是继承地图的clickTolerance 。 |
color 默认: '#3FB1CE' | 如果没有提供options.element ,则用于默认标记的颜色。默认是浅蓝色 |
draggable 默认: false | 一个布尔值,指示标记是否可以拖动到地图上的新位置。 |
element | 用作标记的DOM元素。默认是浅蓝色的液滴形状的SVG标记 |
occludedOpacity 默认: 0.2 | 被3D地形遮挡的标记的不透明度 |
offset | 以像素为单位的偏移量作为PointLike对象,相对于元素的中心应用。负数表示左和上 |
pitchAlignment 默认: 'auto' | 'map' 将Marker 与地图的平面对齐。'viewport' 将Marker 与视口的平面对齐。'auto' 自动匹配rotationAlignment 的值。 |
rotation default: 0 | 标记的旋转角度,以度为单位,相对于其各自的rotationAlignment 设置。正值将顺时针旋转标记。 |
rotationAlignment default: 'auto' | 标记旋转的对齐。'map' 与地图平面对齐,与地图旋转时的基本方向一致。'viewport' 是屏幕空间对齐的。'horizon' 根据最近的视界对齐,在非球投影上,它等同于'viewport' ”。'auto' 等同于'viewport' ”。 |
scale default: 1 | 如果没有提供options.element ,则用于默认标记的刻度。默认比例对应于41px 的高度和27px 的宽度。 |
方法
1、addTo 将弹出窗口添加到地图中
参数: map 要添加弹出窗口的Mapbox GL JS地图。
2、remove 从地图中删除标记
示例:
const marker = new mapboxgl.Marker().addTo(map);
marker.remove();
3、getLngLat 获取标记的地理位置
注:结果的经度可能与之前由setLngLat
设置的经度相差360度的倍数,因为Marker
将锚经度包裹在世界副本上,以将标记保持在屏幕上
示例:
// Store the marker's longitude and latitude coordinates in a variable
const lngLat = marker.getLngLat();
// Print the marker's longitude and latitude values in the console
console.log(`Longitude: ${lngLat.lng}, Latitude: ${lngLat.lat}`);
4、setLngLat 设置标记的地理位置并移动它
示例:
new mapboxgl.Marker()
.setLngLat([-65.017, -16.457])
.addTo(map);
5、getElement 返回Marker
的HTML元素
const element = marker.getElement();
6、setPopup 将弹出窗口绑定到标记
示例:
const marker = new mapboxgl.Marker()
.setLngLat([0, 0])
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>")) // add popup
.addTo(map);
7、getPopup 返回绑定到标记的弹出窗口实例
示例:
const marker = new mapboxgl.Marker()
.setLngLat([0, 0])
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))
.addTo(map);
console.log(marker.getPopup()); // return the popup instance
8、togglePopup 根据弹出窗口的当前状态,打开或关闭绑定到标记的弹出窗口实例
示例:
const marker = new mapboxgl.Marker()
.setLngLat([0, 0])
.setPopup(new mapboxgl.Popup().setHTML("<h1>Hello World!</h1>"))
.addTo(map);
marker.togglePopup(); // toggle popup open or closed
9、getOffset 获取标记的偏移量。
const offset = marker.getOffset();
10、setOffset 设置标记的偏移量
marker.setOffset([0, 1]);
11、setDraggable 设置标记是否可拖动
marker.setDraggable(true);
12、isDraggable 如果标记可以拖动,则返回true
const isMarkerDraggable = marker.isDraggable();
13、setRotation 设置标记的rotation
属性。
参数:number 默认0 标记的旋转角度(顺时针,以度为单位)
marker.setRotation(45);
14、getRotation 返回标记的当前旋转角度(以度为单位)
const rotation = marker.getRotation();
15、setRotationAlignment 设置标记的rotationAlignment
属性(旋转对齐)
参数:(string
默认'auto'
)设置标记的rotationAlignment
属性
marker.setRotationAlignment('viewport');
16、getRotationAlignment 返回标记的当前rotationAlignment
属性
const alignment = marker.getRotationAlignment();
17、setPitchAlignment 设置标记的pitchAlignment
属性。
参数:对齐(string?)
设置标记的pitchAlignment
属性。如果对齐是“自动”,它将自动匹配rotationAlignment
。
marker.setPitchAlignment('map');
18、getPitchAlignment 返回标记的当前pitchAlignment
行为。
const alignment = marker.getPitchAlignment();
19、setOccludedOpacity 设置标记的occludedOpacity
属性。当标记被地形遮挡时,这种不透明度用于标记。
参数:opacity(number
默认0.2
)设置标记的occludedOpacity
属性。
marker.setOccludedOpacity(0.3);
20、getOccludedOpacity 返回标记的当前occludedOpacity
const opacity = marker.getOccludedOpacity()
监听事件:on
1、dragstart 拖动开始时触发。
2、drag 拖动时触发
3、dragend 拖动结束触发
const marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([0, 0])
.addTo(map);
function onDragEnd() {
const lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML = `Longitude: ${lngLat.lng}<br />Latitude: ${lngLat.lat}`;
}
marker.on('dragend', onDragEnd);