# Marker
Marker的样式与常规的css样式一致
# 常用方法
| 方法名 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| addTo(map) | map | Marker.this | 将这个Marker标注添加到地图上 |
| remove() | 无 | Marker.this | 将这个Marker标注添加到地图上 |
| getLngLat() | 无 | Lnglat | 返回该标注的经纬度对象 |
| setLngLat(lnglat) | lnglat | Marker.this | 设置该标注的经纬度信息 |
| getElement() | 无 | HTML5 Element (opens new window) | 返回该标注的html信息 |
| setPopup(popup) | Popup | Marker.this | 针对该标注绑定一个Popup信息 |
| getPopup() | 无 | Popup | 返回该标注的Popup对象 |
| togglePopup() | 无 | Marker.this | 触发该标注的Popup对象 |
| getOffset() | 无 | Point | 返回该标注的偏移值 |
| setOffset(offset) | offset | Offset | 设置该标注的偏移值 |
示例代码
var marker = new vjmap.Marker();
marker.setLngLat(latLng).addTo(map);
1
2
2
# 根据CAD坐标增加Marker至地图
在地图sys_hello中，把此地图中一个CAD坐标为[725.32,18969.19]的点加进地图中
let marker = new vjmap.Marker();
let lngLat = map.toLngLat([725.32,18969.19]);
marker.setLngLat(lngLat);
marker.addToMap()
1
2
3
4
2
3
4
# 自定义标记样式
Marker的Picture样式主要还是通过HTML的方式来实现的，
核心代码
#marker {
background-image: url('../../images/myImg/diqiu.png');
background-size: cover;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
}
// 创建一个DOM element
var el = document.createElement('div');
el.id = 'marker';//将该div与marker的样式绑定
new vjmap.Marker(el);////绑定对应的HTML的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Marker的 Picture&Text 样式主要还是通过HTML的方式来实现的，不同之处在与是通过一个
父div动态添加子picture div和子text div来实现
核心代码
// 创建一个子picture DOM element
var icon = document.createElement('div');
icon.id = 'marker-icon';//绑定图片样式
// 创建一个子text DOM element
var text = document.createElement('div');
text.id = 'marker-text';//绑定文字样式
text.innerText = "测试注记";//添加文字样式
// 创建一个父 div DOM elemen
var el = document.createElement('div');
el.id = 'marker'; //将该div与marker的样式绑定
el.appendChild(icon);//整个父标注添加图片内容
el.appendChild(text);//整个父标注添加文字内容
new vjmap.Marker(el)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 自定义Marker缩放时如何保持位置不动
marker是通过设置一个点位置进行显示，但是marker是一个div,范围是一个矩形,所以要设置marker的锚点和偏移量，也就是这个点在矩形的位置，缩放时这个位置就不会发生变化。
设置anchor属性：anchor属性定义了Marker相对于其位置的锚点。常用的锚点包括选项包括'center'，'top'，'bottom'，'left'，'right'，'top-left'，'top-right'，'bottom-left'，和'bottom-right'。（可选，默认'center'）。
使用offset属性：offset可以用来调整Marker的显示位置。通过指定偏移量，可以将Marker相对于其默认位置进行微调。以像素为单位的偏移量，作为要应用的点对象相对于元素的中心。负数表示向左和向上。
示例: 官网提供的默认markerdiv的高为28个像素, 默认marker地图放大时，底部中间的位置是不会变化的。所以需要把锚点设置为'bottom' 或者 锚点还是缺省的'center'但是offset需要往下移动高度的一半的像素值，也就是14个像素。所以offset应为[0,14]
const marker = new vjmap.Marker({
offset: [0, 14], // 自定义的偏移量
anchor: 'center' // 锚点设置为中心
})
.setLngLat([lng, lat]) // 设置经纬度
.addTo(map);
1
2
3
4
5
6
2
3
4
5
6
# marker和symbol的区别
图文注记实现方式有两种，一种是采取marker的方式，另一种是采用symbol样式。
marker是用div的形式进行开发，优点是实现比较灵活，如可用vue进行开发查看示例 (opens new window)。缺点是如果绘制的太多，会影响性能。
symbol (opens new window) 用基于webgl进行渲染，这种方式使用参数相对固定，扩展性差，但是显示效果速度极佳。
# Maker相关示例
# 类型定义
export interface MarkerOptions {
/** 用作标记的DOM元素。默认值是淡蓝色、液滴形状的SVG标记 */
element?: HTMLElement | undefined;
/** 以像素为单位偏移为PointLike对象，以相对于元素的中心应用。负数表示向左和向上。*/
offset?: PointLike | undefined;
/** 一个字符串，指示标记中应通过Marker.setLngLat定位到最接近描点的部分。
* 选项有 `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
* The default value os `'center'`
*/
anchor?: Anchor | undefined;
/** 如果未提供options.element，则使用默认标记的颜色。默认值为浅蓝色（#3FB1CE） */
color?: string | undefined;
/** 一个布尔值，指示标记是否能够被拖动到地图上的新位置。默认值为false */
draggable?: boolean | undefined;
/**
* 用户在点击标记时可以移动鼠标指针以使其被视为有效点击的最大像素数
* （与标记拖动相反）。默认值（0）是继承地图的clickTolerance。
*/
clickTolerance?: number | null | undefined;
/** 标记相对于其“旋转对齐”设置的旋转角度（度）。正值将使标记顺时针旋转.
* The default value is 0.
*/
rotation?: number | undefined;
/** map 对齐 Marker 相对于地图的旋转，在地图旋转时保持方位。
*`viewport`使`Marker`的旋转相对于视口对齐，与地图旋转无关。
*`auto`相当于`viewport`。
*/
rotationAlignment?: Alignment | undefined;
/** map 将 Marker 与地图平面对齐.
* `viewport`将`Marker`与视口平面对齐.
* `auto`自动匹配`rotationAlignment`的值`
* The default value is `auto`.
*/
pitchAlignment?: Alignment | undefined;
/** 如果未提供options.element，则使用默认标记的比例.
* 默认比例（1）对应于高度“41px”和宽度“27px”`.
*/
scale?: number | undefined;
}
/**
* Marker
*/
export class Marker extends Evented {
constructor(options?: vjmap.MarkerOptions);
constructor(element?: HTMLElement, options?: vjmap.MarkerOptions);
/**
* 设置动画
* @param animationType
* MAP_ANIMATION_NONE 无动画
* MAP_ANIMATION_BOUNCE 弹跳
* MAP_ANIMATION_DROP 坠落
*/
setAnimation(animationType: string): void;
/**
* 设置颜色
* @param color 颜色
*/
setColor(color: string): void;
/**
* 显示
*/
show(): void;
/**
* 隐藏
*/
hide(): void;
/**
* 获取是否隐藏了，当设置了hide或缩放级别或视图范围外不可见时，返回true，否则返回false
*/
isHidden(): boolean;
/**
* 设置光标
* @param cur 光标名称
*/
setCursor(cur: string): void;
/**
* 设置高度
* @param height 高度值
*/
setHeight(height: number): Marker;
/**
* 设置显示的最小缩放级别
* @param zoom 缩放级别
*/
setMinZoom(zoom: number): Marker;
/**
* 设置显示的最大缩放级别
* @param zoom 缩放级别
*/
setMaxZoom(zoom: number): Marker;
/**
* 设置当marker不在当前地图视图范围内时，将自动移除。进入视图范围内时，将自动增加上，当自动移除或增加时，将触发`autoAdd`和`autoRemove`事件
* @param autoRemove true不在当前地图视图范围内时，将自动移除，false不会自动移除
* @param padding 范围向外扩的像素范围，默认500px，向视图范围往外扩些像素，在平移的时候，能看到marker，体验效果好些。
*/
setRemoveWhenNoInMapView(autoRemove: boolean, padding?: number): Marker;
/**
* 设置能缩放的最大级别。如果小于这个级别，div将根据缩小级别自动缩小比例。默认不会自动缩放，当自动移除或增加时，将触发`autoAdd`和`autoRemove`事件
* @param zoom 缩放级别
*/
setScaleMaxZoom(zoom: number): Marker;
/**
* 得到高度值
*/
getHeight(): number | undefined;
/**
* 得到显示的最小缩放级别
*/
getMinZoom(): number | undefined;
/**
* 得到显示的最大缩放级别
*/
getMaxZoom(): number | undefined;
/**
* 得到能缩放的最大级别。如果小于这个级别，div将根据缩小级别自动缩小比例。默认不会自动缩放
*/
getScaleMaxZoom(zoom: number): number | undefined;
/**
* 得到当marker不在当前地图视图范围内时，将自动移除。进入视图范围内时，将自动增加上
*/
getRemoveWhenNoInMapView(): boolean;
/**
* 设置是否显示隐藏
* @param visible 是否显示
* @param isDisplay true的话，表示用style的display去控制隐藏显示，dom还在文档中。false的话，会从文档动态清空增加
*/
setVisible(visible?: boolean, isDisplay?: boolean): Marker;
addTo(map: Map): this;
remove(): this;
getLngLat(): LngLat;
setLngLat(lngLat: LngLatLike): this;
getElement(): HTMLElement;
setPopup(popup?: Popup): this;
getPopup(): Popup;
togglePopup(): this;
getOffset(): PointLike;
setOffset(offset: PointLike): this;
setDraggable(shouldBeDraggable: boolean): this;
isDraggable(): boolean;
getRotation(): number;
setRotation(rotation: number): this;
getRotationAlignment(): Alignment;
setRotationAlignment(alignment: Alignment): this;
getPitchAlignment(): Alignment;
setPitchAlignment(alignment: Alignment): this;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193