---
title: Marker
source: https://vjmap.com/en/doc/Marker.html
---

# Marker
**扩展事件**


创建一个标记组件

### Parameters
- `options` **`Object`?**
    - `options.element` **`HTMLElement`?** 用作标记的 DOM 元素。默认为浅蓝色、水滴状的 SVG 标记。
    - `options.anchor` **`string`**一个字符串，指示应该通过`Marker#setLngLat`定位到最接近坐标集的`Marker 部分`。选项包括`'center'`，`'top'`，`'bottom'`，`'left'`，`'right'`，`'top-left'`，`'top-right'`，`'bottom-left'`，和`'bottom-right'`。（可选，默认`'center'`）
    - `options.offset` **`点像`?** 以像素为单位的偏移量，作为要应用的[PointLike][166]对象相对于元素的中心。负数表示向左和向上。
    - `options.color` **`string`**如果未提供 options.element，则用于默认标记的颜色。默认为浅蓝色。（可选，默认`'#3FB1CE'`）
    - `options.scale` **`number`**如果未提供 options.element，则用于默认标记的比例。默认比例对应于 的高度`41px`和宽度`27px`。（可选，默认`1`）
    - `options.draggable` **`boolean`**一个布尔值，指示是否可以将标记拖动到地图上的新位置。（可选，默认`false`）
    - `options.clickTolerance` **`number`**用户在点击标记期间可以移动鼠标指针的最大像素数，以便将其视为有效点击（与标记拖动相反）。默认是继承地图的clickTolerance。（可选，默认`0`）
    - `options.rotation` **`number`**标记相对于其各自`rotationAlignment`设置的旋转角度（以度为单位）。正值将顺时针旋转标记。（可选，默认`0`）
    - `options.pitchAlignment` **`string`** `map`将 与`Marker`地图平面对齐。`viewport`将 与`Marker`视口平面对齐。`auto`自动匹配 的值`rotationAlignment`。（可选，默认`'auto'`）
    - `options.rotationAlignment` **`string`** `map`对齐`Marker`相对于地图的旋转，在地图旋转时保持方位角。相对于视口`viewport`对齐`Marker`的旋转，与地图旋转无关。`auto`相当于`viewport`。（可选，默认`'auto'`）
- `legacyOptions` **选项？**

### Examples
```
var marker = new vjmap.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);
```

```
// Set options
var marker = new vjmap.Marker({
    color: "#FFFFFF",
    draggable: true
  }).setLngLat([30.5, 50.5])
  .addTo(map);
```

### addTo
将 附加`Marker`到`Map`对象。

#### Parameters
- `map` **[Map][1]**要添加标记的地图。

#### Examples
```
var marker = new vjmap.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // add the marker to the map
```

返回**`标记`** `this`

### remove
从地图上移除标记

#### Examples
```
var marker = new vjmap.Marker().addTo(map);
marker.remove();
```

返回**`标记`** `this`

### getLngLat

获取标记的地理位置。

结果的经度可能与之前设置的经度相差 360 度的倍数，`setLngLat`因为`Marker`将锚定经度包裹在世界的副本上以将标记保留在屏幕上。

#### Examples
```
// Store the marker's longitude and latitude coordinates in a variable
var lngLat = marker.getLngLat();
// Print the marker's longitude and latitude values in the console
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )
```

返回**[LngLat][230]**一个[LngLat][230]描述标记的位置。

### setLngLat

设置标记的地理位置并移动它。

#### Parameters
- `lnglat` **[LngLat][230]**甲[LngLat][230]描述将标记应位于。

#### Examples
```
// Create a new marker, set the longitude and latitude, and add it to the map
new vjmap.Marker()
  .setLngLat([-65.017, -16.457])
  .addTo(map);
```

返回**`标记`** `this`

### getElement
返回`Marker`的 HTML 元素。

返回**`HTMLElement`**元素

### setPopup

将[Popup][208]绑定到[Marker][238]。

#### Parameters
- `popup` **`弹出窗口`？**[Popup][208]类的一个实例。如果未定义或为空，则在此[Marker][238]实例上设置的任何弹出窗口都未设置。

#### Examples
```
var marker = new vjmap.Marker()
 .setLngLat([0, 0])
 .setPopup(new vjmap.Popup().setHTML("<h1>Hello World!</h1>")) // add popup
 .addTo(map);
```

返回**`标记`** `this`

### getPopup
返回绑定到`Marker][238]的[Popup][208]实例。[`

#### Examples
```
var marker = new vjmap.Marker()
 .setLngLat([0, 0])
 .setPopup(new vjmap.Popup().setHTML("<h1>Hello World!</h1>"))
 .addTo(map);

console.log(marker.getPopup()); // return the popup instance
```

返回**`弹出`**窗口

### togglePopup
打开或关闭`弹出`绑定到该实例`标记`，这取决于当前的状态`弹出`。

#### Examples
```
var marker = new vjmap.Marker()
 .setLngLat([0, 0])
 .setPopup(new vjmap.Popup().setHTML("<h1>Hello World!</h1>"))
 .addTo(map);

marker.togglePopup(); // toggle popup open or closed
```

返回**`标记`** `this`

### getOffset
获取标记的偏移量。

返回**[Point][165]**标记的屏幕坐标（以像素为单位）。

### setOffset
设置标记的偏移量

#### Parameters
- `offset` **[PointLike][166]**作为要应用的[PointLike][166]对象相对于元素中心的偏移量（以像素为单位）。负数表示向左和向上。

返回**`标记`** `this`

### setDraggable
设置`draggable`标记的属性和功能

#### Parameters
- `shouldBeDraggable` **`boolean`**打开/关闭拖动功能（可选，默认`false`）

返回**`标记`** `this`

### isDraggable
如果可以拖动标记，则返回 true

**`boolean`**如果标记是可拖动的，则返回True。

### setRotation
设置`rotation`标记的属性。

#### Parameters
- `rotation` **`number`**标记的旋转角度（顺时针，以度为单位），相对于其各自的`Marker#setRotationAlignment`设置。（可选，默认`0`）

返回**`标记`** `this`

### getRotation
返回标记的当前旋转角度（以度为单位）。

返回**`number`**标记的当前旋转角度。

### setRotationAlignment
设置`rotationAlignment`标记的属性。

#### Parameters
- `alignment` **`string`**设置`rotationAlignment`标记的属性。（可选，默认`'auto'`）

返回**`标记`** `this`

### getRotationAlignment
返回`rotationAlignment`标记的当前属性。

返回**`string`**标记的当前旋转对齐方式。

### setPitchAlignment
设置`pitchAlignment`标记的属性。

#### Parameters
- `alignment` **`string`?** 设置`pitchAlignment`标记的属性。如果对齐是“自动”，它会自动匹配`rotationAlignment`。

返回**`标记`** `this`

### getPitchAlignment
返回`pitchAlignment`标记的当前属性。

返回**`string`**标记的当前音高对齐（以度为单位）。

### dragstart
拖动开始时触发

类型： `Object`

#### Properties
- `marker` 被拖动的**`标记`**对象

### drag
拖动时触发

类型： `Object`

#### Properties
- `marker` 被拖动的**`标记`**对象

### dragend
当标记完成拖动时触发

类型： `Object`

#### Properties
- `marker` 被拖动的**`标记`**对象