Marker

可以添加到地图的用户界面元素。

new Marker(options: Object?, legacyOptions: Options?)

参数

名称	类型	描述
legacyOptions	Object	必填
options	Object	必填参数 名称 类型 默认值 描述 anchor String center 可选设置 Marker 位置。选项包括 "center"， "top"， "bottom"， "left"， "right"， "top-left"， "top-right"， "bottom-left"，和 "bottom-right"。 clickTolerance Number 0 可选用户在单击 Marker 时可以移动鼠标指针的最大像素数，以将其视为有效点击（与 Marker 拖动相反）。默认值为继承地图的 clickTolerance。 color String #3FB1CE 可选如果未提供 options.element，则使用默认颜色。 draggable Boolean false 可选表示是否可以将 Marker 拖动到地图上的新位置。 element HTMLElment 可选用作标记的 DOM 元素。默认值为浅蓝色，水滴形的 SVG 标记。 offset PointLike 可选作为 PointLike 对象的偏移量（以像素为单位）， 相对于元素中心点。负数表示向上和向左。 pitchAlignment String auto 可选 "map" 将 Marker 与地图的平面对齐。"viewport" 将 Marker 与视口的平面对齐。"auto" 自动匹配 rotationAlignment 的值。 rotation Number 0 可选Marker 相对于其各自 rotationAlignment 设置的旋转角度（以度为单位）。正值表示使 Marker 顺时针旋转。 rotationAlignment String auto 可选Marker 旋转的对齐方式，"map" 使 Marker 相对于地图平面对齐旋转，与地图旋转时的基本方向一致。 "viewport" 使 Marker 相对于视口平面对齐旋转，与地图旋转无关。"auto" 等价于 "viewport"。 scale Number 1 可选如果未提供 options.element，则使用默认比例。默认比例对应于高度 41px 和宽度 27px。

案例

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map);

// 设置选项
var marker = new mapmost.Marker({
    color: "#FFFFFF",
    draggable: true
  }).setLngLat([30.5, 50.5])
  .addTo(map);

实例成员

addTo

将 Marker 添加到地图上。

参数

名称	类型	描述
map	Map	必填要添加 Marker 的 Mapmost GL JS地图。

案例

var marker = new mapmost.Marker()
  .setLngLat([30.5, 50.5])
  .addTo(map); // 将 Marker 添加到地图上

getElement

返回 Marker 的 HTML 元素。

案例

const element = marker.getElement();

getLngLat

获取标记的地理位置。

案例

// 将 marker 的经纬度坐标存储到一个变量中
var lngLat = marker.getLngLat();
// 在控制台打印 marker 的经纬度值
console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )

getOffset

获取标记的偏移量。

案例

const offset = marker.getOffset();

getPopup

返回绑定到 Marker 的 Popup 实例。

案例

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

console.log(marker.getPopup()); // 返回 popup 实例

remove

从地图上移除 Marker。

案例

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

setLngLat

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

参数

名称	类型	描述
lnglat	Lnglat	必填Marker 移动后的位置。

案例

// 创建一个新 marker，设置经纬度，并添加到地图。
new mapmost.Marker()
    .setLngLat([-65.017, -16.457])
    .addTo(map);

setPopup

将 Popup 绑定到 Marker。

参数

名称	类型	描述
popup	Popup	必填如果未定义或为 null，则取消绑定在此 Marker 实例上的所有 Popup。

案例

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>")) // 添加 popup
    .addTo(map);

togglePopup

打开或关闭绑定到 Marker 的 Popup 实例，具体取决于 Popup 的当前状态。

案例

const marker = new mapmost.Marker()
    .setLngLat([0, 0])
    .setPopup(new mapmost.Popup().setHTML("<h1>Hello World!</h1>"))
    .addTo(map);

marker.togglePopup(); // 切换 popup 打开或关闭

事件

drag

拖动时触发。

 

dragend

当标记完成拖动时触发。

 

dragstart

拖动开始时触发。