# 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
# 自定义标记样式
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的方式，另一种是采用symbol样式。 marker用于
临时自己添加的图文样式，symbol用于提前准备好的矢量瓦片的图文样式，这种方式使用相对苛刻，但是显示效果极佳。
这里主要是介绍第一种marker的实现方式，矢量瓦片的sprite样式的方式请参考，“symbol”
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