超图文档-Marker 标注用于创建一个标记组件示例： API配置名称描述 anchor默认： 'center'

用于创建一个标记组件

示例：

    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);

超图文档-Marker 标注