# 地图覆盖物

地图覆盖物主要包括 markers, 和 popups，他们是独立于地图的 Canvas 的，以一个 DOM 元素的形式存在，开发者可以发挥充分的想象力去运用它们，比如将 Vue 组件注册到 markers 里面。

# Markers

创建标记组件。

new Marker(options: Object?)

# 参数

options(Object?)

名称	类型	说明
element	`HTMLElement`	作为标记的DOM元素，默认是一个浅蓝色、水滴状的SVG标记。
anchor	`string`	一个字符串，用来表示标记的哪个部位距离坐标点最近，该坐标点可通过 Marker#setLngLat 设置。字符串的值可以是 `'center'` , `'top'` , `'bottom'` , `'left'` , `'right'` , `'top-left'` , `'top-right'` , `'bottom-left'` , and `'bottom-right'` ，默认为`'center'`。
offset	`PointLike`	通过 PointLike 对象表示相对于元素中心偏移的像素数，左和上分别为负方向。
color	`string`	默认标记的颜色（在没有给出options.element时），其默认值是`'#3FB1CE'`。
draggable	`boolean`	一个布尔值，表示标记是否可以在地图上拖动，默认为 `false`。
clickTolerance	`number`	用户点击拾取 marker 时，允许的鼠标位置偏移量，默认为等于地图的`clickTolerance`。
pitchAlignment	`string`	指定为`map`则 marker 将贴合在地图平面上，指定为`viewport`则 marker 将贴合在屏幕上，指定为`auto`则等同于 `rotationAlignment`，默认`auto`。
rotation	`number`	根据`rotationAlignment`的设置，沿着顺时针的旋转角度。
rotationAlignment	`string`	指定为`map`则 marker 将随着地图旋转而转动，指定为`viewport`则 marker 的旋转角度与屏幕保持一致，不受地图影响。默认为`viewport`。
scale	`number`	如果`element`参数没有提供，则本参数将影响默认图标的大小。

# 示例

# 实例成员

addTo(map)

将标记添加到地图上。

参数

map(Map)

返回值

Marker: this

remove()

将标记从地图上移除。

返回值

Marker: this

示例

var marker = new aimap.Marker().addTo(map);
marker.remove();

1
2

getLngLat()

获取标记的地理位置。

这里得到结果的经纬度可能与之前setLngLat方法设置的经纬度相差几个360度，因为Marker可能会跨多个世界副本来封装锚点的经纬度，以保证标记能显示在屏幕上。

返回值

LngLat

setLngLat(lnglat)

设置标记的地理位置，并将其移动到相应位置。

参数

lnglat(LngLatLike)

返回值

Marker: this

getElement()

返回Marker的HTML元素。

返回值

HTMLElement: element

setPopup(popup)

为标记绑定弹窗。

参数

popup(Popup?) Popup 类的一个实例，如果为 undefined 或 null，则这个 Marker 实例上设置的任何弹窗都将被销毁。

返回值

Marker: this

getPopup()

返回绑定在该标记上的弹窗实例。

返回值

Popup: 弹窗

togglePopup()

根据当前状态打开或关闭弹窗。

返回值

Marker: this

getOffset()

获取标记的偏移量。

返回值

Point

setOffset(offset)

设置标记的偏移量。

参数

offset(PointLike)通过 PointLike 对象表示相对于元素中心偏移的像素数，左和上分别为负方向。

返回值

Marker: this

setDraggable(shouldBeDraggable)

设置标记的draggable属性和功能。

参数

shouldBeDraggable(boolean)(default false)开启或关闭拖拽功能

返回值

Marker: this

isDraggable()

返回标记是否可以拖拽。

返回值

boolean

setRotation(rotation)

设置 marker 的旋转角度。

参数

rotation(number)沿着顺时针的旋转角度。

返回值

Marker: this

示例

marker.setRotation(45);

getRotation()

获取 marker 当前的旋转角度。

返回值

number

setRotationAlignment(alignment)

设置 marker 的 rotationAlignment 属性。

参数

alignment(string)可选map或者viewport，含义参照上方表格。

返回值

Marker: this

示例

marker.setRotationAlignment('viewport');

getRotationAlignment()

获取 marker 的 rotationAlignment 属性。

返回值

string

setPitchAlignment(alignment)

设置 marker 的 pitchAlignment 属性。

参数

alignment(string)可选map或者viewport，含义参照上方表格。

返回值

Marker: this

示例

marker.setPitchAlignment('map');

getPitchAlignment()

获取 marker 的 pitchAlignment 属性。

返回值

string

# 事件

dragstart

拖拽开始时触发。

属性

marker(Marker): 拖拽的对象

drag

拖拽时触发。

属性

marker(Marker): 拖拽的对象

dragend

标记拖拽结束时触发。

属性

marker(Marker): 拖拽的对象

弹窗组件。

new Popup(options: Object?)

# 参数

options(Object?)

名称	类型	说明
closeButton	`boolean`	如果为 `true` ，弹窗右上角将出现关闭按钮，默认为`true`。
closeOnClick	`boolean`	如果为 `true` ，点击地图时弹窗将关闭，默认为`true`。
anchor	`string`	表示弹窗位置的字符，通过 Popup#setLngLat 与坐标集关联。选项有 `'center'` , `'top'` , `'bottom'` , `'left'` , `'right'` , `'top-left'` , `'top-right'` , `'bottom-left'` ，以及 `'bottom-right'` 。如未设置，将对锚点进行动态设置，以保证弹窗落在地图容器内，并偏向 `'bottom'` 。
offset	`number \|PointLike`	对应到弹窗位置的像素偏移具体为：表示离弹窗位置距离的一个数字表示常数偏移的 PointLike表示每个锚点位置偏移程度的Point对象负偏移表示向左和向上。
className	`string`	添加到弹窗容器的以空格分隔的CSS类名。
maxWidth	`string`	设置弹窗CSS属性中最大宽度的字符串，例如 `'300px'` 。为确保弹窗在缩放后能容纳内容，应设置此属性为 `'none'` ，默认为`'240px'`。有效值请参考该链接： https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

# 示例

# 实例成员

addTo(map)

在地图上添加弹窗。

参数

map(Map)需要添加弹窗的 aimap.gl 地图。

返回值

Popup: this

isOpen()

返回弹窗是否打开。

返回值

boolean: 弹窗如处于弹出状态则为true ，如处于关闭状态则为 false

remove()

从添加地图中移除弹窗。

返回值

Popup: this

示例

var popup = new aimap.Popup().addTo(map);
popup.remove();

1
2

getLngLat()

返回弹窗的锚所在地理位置。

返回的经度会在先前通过setLngLat设置的经度的基础之上以360度的倍数来变化，这是因为Popup 要将锚的经度完全包围在周边以保证弹窗能在屏幕上显示。

返回值

LngLat: 弹窗的锚的地理位置。

setLngLat(lnglat)

设置好弹窗的锚的地理位置后使弹窗移动过去。替代了 trackPointer() 的效果。

参数

lnglat(LngLatLike)要设置的弹窗的锚的地理位置。

返回值

Popup: this

trackPointer()

利用弹窗的锚，借助指针设备，追踪屏幕上光标的位置（在触屏模式下隐藏）。替代了 setLngLat 的效果。在多数情况下，此处closeOnClick 和 closeButton 应设置为 false 。

返回值

Popup: this

getElement()

返回Popup的 HTML 元素。

返回值

HTMLElement: element

setText(text)

将弹窗的内容设置为一串文本。

此功能将在 DOM 内创建一个Text (opens new window) 节点，从而使原始 HTML 无法被插入。当弹窗内容由用户提供时，可使用此方法作为针对 XSS 的安全保护措施。

参数

text(string)弹窗的文本内容。

返回值

Popup: this

示例

var popup = new aimap.Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);

1
2
3
4

setHTML(html)

将弹窗内容设置为以字符串形式提供的 HTML。

此方法不会进行 HTML 过滤或清理，因此只能用于受信任的内容。对于不受信任的文本字符串，请考虑使用Popup#setText 。

参数

html(string)用于代表弹窗 HTML 内容的字符串。

返回值

Popup: this

getMaxWidth()

返回弹窗的最大宽度。

返回值

string: 弹窗的最大宽度。

setMaxWidth(maxWidth)

设置弹窗的最大宽度。实质上是在设置 CSS 的 max-width属性。有效值请参考该链接：https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

参数

maxWidth(string)用于表示最大宽度值的字符串。

返回值

Popup: this

setDOMContent(htmlNode)

将弹窗内容设置为以 DOM 节点形式提供的元素。

参数

htmlNode(Node)用于作为弹窗内容的 DOM 节点。

返回值

Popup: this

示例

// 用弹窗内容生成一个元素
var div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
var popup = new aimap.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

1
2
3
4
5
6
7

# 事件

open

当弹窗被手动或程序打开时触发。

属性

popup(Popup): 被打开的对象

当弹窗被手动或程序关闭时触发。

属性

popup(Popup): 被关闭的对象

← 绘图控件地理坐标与几何坐标 →

# 地图覆盖物

# Markers

# 参数

# 示例

# 实例成员

# 事件

# Popup

# 参数

# 示例

# 实例成员

# 事件