options
本文回答: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。
九、常见坑
lngLat传 CAD 坐标 → marker 飞到赤道;CAD 必须先map.toLngLat。color不生效:只对默认水滴图标有效;自定义element后,color不会渲染到 DOM。- 自定义
element没宽高 → marker 看不见(DOM 是 0x0)。 scale只缩放默认水滴:自定义元素不受scale控制。