唯杰地图 logo唯杰地图
VJMAP
EN

options

vjmap/references/marker/options.md 5.5 KB133 行
原文

本文回答:Marker 参数表 —— 17 个字段,含默认值、效果、典型用法。

⚠️ new Marker() 只吃引擎原生 MarkerOptions(表中无 † 的字段)。lngLat/height/minZoom/maxZoom/scaleMaxZoom/removeWhenNoInMapView/removeWhenNoInMapViewPadding(标 †)是 vjmap 扩展,必须经 vjmap.createMarker(options)(其内部逐个调 setter)或运行时 setter(setMinZoom/setHeight/setRemoveWhenNoInMapView…)传入——写在 new vjmap.Marker({...}) 构造参数里会被静默忽略(d.ts 类型是 createMarkerOptions extends MarkerOptions,构造器不读这些键)。

完整参数表

参数 类型 默认 说明
element HTMLElement 内置水滴 SVG 用作标记的 DOM;不传就用默认图标
anchor string "center" DOM 的哪一点对齐到 lngLat:center / top / bottom / left / right / top-left / top-right / bottom-left / bottom-right
offset [x, y] 默认水滴 [0, -14];自定义 element [0, 0] 以像素为单位的偏移;负数表示向左 / 向上
color string "#3FB1CE" 默认图标的颜色(element 没传时才生效)
scale number 1 默认图标的缩放(h=41, w=27)
draggable boolean false 是否可拖动
clickTolerance number 0 点击时鼠标可移动的最大像素;超过算拖拽
rotation number 0 旋转角度(度,顺时针为正)
rotationAlignment "map" / "viewport" / "auto" "auto"(= viewport) map 模式下随地图旋转
pitchAlignment "map" / "viewport" / "auto" "auto"(跟随 rotationAlignment) map 模式下倾斜时贴地
lngLat † [number, number] / LngLat — 初始位置(可不传,用 setLngLat)
height † number — 高度值(3D 模式下让 Marker 悬浮)
minZoom † number — 低于此缩放级别时不显示
maxZoom † number — 高于此缩放级别时不显示
scaleMaxZoom † number — 低于此级别时 DOM 自动按比例缩小
removeWhenNoInMapView † boolean false 不在视图内自动移除,进入时自动添加
removeWhenNoInMapViewPadding † number 500 视图范围向外扩多少像素才算"不在视图"

一、anchor 枚举图示

 top-left   top   top-right
 left     center       right
 bottom-left bottom bottom-right

anchor 是图标的哪一点锚在 lngLat。

二、典型组合

水滴形(图标底端尖尖指向目标点):

new vjmap.Marker({ anchor: "bottom", offset: [0, 0] });

自定义 DIV 底端对齐:

new vjmap.Marker({
  element: el,       // height 60
  anchor: "bottom",
  offset: [0, 0]
});

默认水滴即 anchor: "center" + offset: [0, -14](中心上移 14px),尖端已对准坐标,无需再传;显式传 offset 会覆盖这个默认值:

new vjmap.Marker();   // 等价 new vjmap.Marker({ anchor: "center", offset: [0, -14] })

三、height(3D 悬浮)

map.setPitch(60);
vjmap.createMarker({ color: "#f0f", height: 200 })  // 200 米高(height 是扩展字段,须走 createMarker)
  .setLngLat([lng, lat]).addTo(map);
// 等价:new vjmap.Marker({color:"#f0f"}).setHeight(200).setLngLat(...).addTo(map)

低 pitch 下看不到悬浮效果。

四、rotationAlignment / pitchAlignment

值 效果
"viewport" 始终贴屏幕正面;地图旋转/倾斜时不变
"map" 贴地面;地图旋转时跟着转,倾斜时扁平化
"auto" rotationAlignment 的 auto = viewport;pitchAlignment 的 auto = 跟随 rotationAlignment 的取值

场景:"map" 适合道路标识箭头(要和道路方向一致);"viewport" 适合 POI 标签。

五、运行时修改

marker.setOffset([0, -40]);
marker.setRotation(45);
marker.setRotationAlignment("map");
marker.setPitchAlignment("map");
marker.setColor("#f0f");
marker.setDraggable(true);

六、minZoom / maxZoom

vjmap.createMarker({ minZoom: 10, maxZoom: 18 })
  .setLngLat([lng, lat]).addTo(map);

区间为 [minZoom, maxZoom):超出区间时内部 remove(true) 把 DOM 从文档摘除(触发 autoRemove),回到区间再插回(触发 autoAdd),不是 display:none;判定只在下一次 zoomend / moveend 时执行。

运行时:

marker.setMinZoom(12);
marker.setMaxZoom(20);

七、scaleMaxZoom(缩小地图时自动缩小图标)

vjmap.createMarker({ scaleMaxZoom: 15 })   // 缩小到 15 级以下时,图标随比例缩小
  .setLngLat([lng, lat]).addTo(map);

八、removeWhenNoInMapView(视窗裁剪)

vjmap.createMarker({ removeWhenNoInMapView: true, removeWhenNoInMapViewPadding: 300 })
  .setLngLat([lng, lat]).addTo(map);

效果:平移时不在视窗的 Marker 从文档摘除(同一 DOM 节点只是 detach,不销毁),回到视窗内再插回。对几千个 Marker 的性能极有帮助。

触发事件:autoAdd / autoRemove。

九、常见坑

  1. lngLat 传 CAD 坐标 → marker 飞到赤道;CAD 必须先 map.toLngLat。
  2. color 不生效:只对默认水滴图标有效;自定义 element 后,color 不会渲染到 DOM。
  3. 自定义 element 没宽高 → marker 看不见(DOM 是 0x0)。
  4. scale 只缩放默认水滴:自定义元素不受 scale 控制。