图标点Marker 矢量对象
参数名称 | 类型 | 描述信息 | ||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options |
Object |
参数对象,包括以下:
|
参考:
继承
- L.Marker
成员(属性)
属性信息
中心点
获取对象的DOM容器
获取或设置 经度、纬度位置坐标(数组对象),示例 [ [123.123456,32.654321] ]
获取当前图标对应DIV的高宽,返回结果示例:{width:10,height;20}
对象的id标识
是否已添加到地图
坐标位置
坐标位置数组 , 主要为了兼容线面数据的使用(比如标绘中)
显示隐藏状态
样式信息
是否显示测试点,可以进行用于比较测试div的位置,方便调试CSS。
方法
addEventParent(obj) → Marker
graphic/Marker.js 803
添加抛出事件到父类,它将接收传播的事件
参数名称 | 类型 | 描述信息 |
---|---|---|
obj |
Object |
父类对象 |
返回值:
当前对象本身,可以链式调用
addTo(map) → Marker
graphic/Marker.js 557
将图层添加到地图
参数名称 | 类型 | 描述信息 |
---|---|---|
map |
Map |
地图对象 |
返回值:
当前对象本身,可以链式调用
bindContextMenu(contextmenuItems) → Map
graphic/Marker.js 710
绑定右键菜单
参数名称 | 类型 | 描述信息 |
---|---|---|
contextmenuItems |
Array.<Object> |
右键菜单数组 |
返回值:
当前对象本身,可以链式调用
bindPopup(content, options) → Marker
graphic/Marker.js 576
绑定Popup弹窗配置
参数名称 | 类型 | 描述信息 |
---|---|---|
content |
String | HTMLElement | function | L.Popup |
Popup弹窗内容 |
options |
Map.PopupOptions | Object |
可选
Popup弹窗参数 |
返回值:
当前对象本身,可以链式调用
bindTooltip(content, options) → Marker
graphic/Marker.js 643
绑定Tooltip弹窗配置
参数名称 | 类型 | 描述信息 |
---|---|---|
content |
String | HTMLElement | function | L.Tooltip |
Tooltip弹窗内容 |
options |
Map.TooltipOptions | Object |
可选
Tooltip弹窗参数 |
返回值:
当前对象本身,可以链式调用
closePopup() → Marker
graphic/Marker.js 606
关闭打开的弹窗
返回值:
当前对象本身,可以链式调用
closeTooltip() → Marker
graphic/Marker.js 673
关闭打开的弹窗
返回值:
当前对象本身,可以链式调用
销毁矢量对象
返回值:
无
触发指定类型的事件。
参数名称 | 类型 | 默认值 | 描述信息 |
---|---|---|---|
type |
String | EventType |
事件类型 |
|
data |
Object |
可选
传输的数据或对象,可在事件回调方法中event对象中获取进行使用 |
|
propagate |
BaseClass | Object |
null
|
可选
将事件传播给父类 (用addEventParent设置) |
返回值:
无
获取绑定的右键菜单
返回值:
右键菜单数组
返回图标点的LatLng经纬度对象
返回值:
经纬度对象
获取当前绑定在图层上的Popup弹窗对象
返回值:
Popup弹窗对象
获取当前绑定在图层上的Tooltip弹窗对象
返回值:
Tooltip弹窗对象
当前绑定的弹窗是是否打开
返回值:
是否打开弹窗
当前绑定的弹窗是是否打开
返回值:
是否打开弹窗
是否有绑定指定的事件
参数名称 | 类型 | 描述信息 |
---|---|---|
type |
String | EventType |
事件类型 |
propagate |
Object |
可选
是否判断指定的父类 (用addEventParent设置的) |
返回值:
是否存在
解除绑定指定类型事件监听器
参数名称 | 类型 | 描述信息 |
---|---|---|
types |
String | EventType | Object |
可选
事件类型,Object时删除一组类型/侦听器对。 |
fn |
function |
可选
绑定的监听器回调方法 |
context |
Object |
可选
侦听器的上下文(this关键字将指向的对象)。 |
返回值:
无
绑定指定类型事件监听器
参数名称 | 类型 | 描述信息 |
---|---|---|
type |
String | EventType | Object |
事件类型,当是Object时可以添加一组类型/侦听器对,例如 {click: onClick, mousemove: onMouseMove} |
fn |
function |
可选
绑定的监听器回调方法 |
context |
Object |
可选
侦听器的上下文(this关键字将指向的对象)。 |
返回值:
无
绑定一次性执行的指定类型事件监听器 与on类似,监听器只会被触发一次,然后被删除。
参数名称 | 类型 | 描述信息 |
---|---|---|
types |
String | EventType | Object |
可选
事件类型,Object时删除一组类型/侦听器对。 |
fn |
function |
可选
绑定的监听器回调方法 |
context |
Object |
可选
侦听器的上下文(this关键字将指向的对象)。 |
返回值:
无
openPopup(latlng) → Marker
graphic/Marker.js 596
打开Popup弹窗
参数名称 | 类型 | 描述信息 |
---|---|---|
latlng |
L.LatLng |
可选
位置,如果latlng没有设置则在默认的所在位置打开。 |
返回值:
当前对象本身,可以链式调用
openTooltip(latlng) → Marker
graphic/Marker.js 663
打开Tooltip弹窗
参数名称 | 类型 | 描述信息 |
---|---|---|
latlng |
L.LatLng |
可选
位置,如果latlng没有设置则在默认的所在位置打开。 |
返回值:
当前对象本身,可以链式调用
remove() → Marker
graphic/Marker.js 567
将图层从地图上移除
返回值:
当前对象本身,可以链式调用
removeEventParent(obj) → Marker
graphic/Marker.js 813
移除抛出事件到父类
参数名称 | 类型 | 描述信息 |
---|---|---|
obj |
Object |
父类对象 |
返回值:
当前对象本身,可以链式调用
setLatLng(latlng) → Marker
graphic/Marker.js 527
修改位置
参数名称 | 类型 | 描述信息 |
---|---|---|
latlng |
L.LatLng |
经纬度对象 |
返回值:
当前对象本身,可以链式调用
setOpacity(opacity) → Marker
graphic/Marker.js 547
改变透明度
参数名称 | 类型 | 描述信息 |
---|---|---|
opacity |
Number |
透明度 |
返回值:
当前对象本身,可以链式调用
setPopupContent(content) → Marker
graphic/Marker.js 624
设定绑定在图层上的弹窗的内容
参数名称 | 类型 | 描述信息 |
---|---|---|
content |
String | HTMLElement | L.Popup |
Popup弹窗内容 |
返回值:
当前对象本身,可以链式调用
setRotationAngle(angle) → Marker
graphic/Marker.js 416
设置 旋转角度(度数值,0-360度)
参数名称 | 类型 | 描述信息 |
---|---|---|
angle |
Number |
旋转角度(度数值,0-360度) |
返回值:
当前对象本身,可以链式调用
setStyle(newStyle) → Marker
graphic/Marker.js 428
设置 样式信息 的钩子方法
参数名称 | 类型 | 描述信息 |
---|---|---|
newStyle |
Marker.StyleOptions |
本次更新的部分样式信息,内部会合并属性 |
返回值:
当前对象本身,可以链式调用
setTooltipContent(content) → Marker
graphic/Marker.js 691
设定绑定在图层上的弹窗的内容
参数名称 | 类型 | 描述信息 |
---|---|---|
content |
String | HTMLElement | L.Tooltip |
Tooltip弹窗内容 |
返回值:
当前对象本身,可以链式调用
setZIndexOffset(offset) → Marker
graphic/Marker.js 537
改变zIndex顺序
参数名称 | 类型 | 描述信息 |
---|---|---|
offset |
Number |
zIndex顺序 |
返回值:
当前对象本身,可以链式调用
将图层数据导出为GeoJSON格式规范对象。
参数名称 | 类型 | 描述信息 | ||||||
---|---|---|---|---|---|---|---|---|
options |
Object |
可选
参数对象:
|
返回值:
GeoJSON格式规范对象
将矢量数据的坐标、样式及属性等信息导出为对象,可以用于存储。
返回值:
导出的坐标、样式及属性等信息
unbindContextMenu() → Map
graphic/Marker.js 729
解除绑定右键菜单
返回值:
当前对象本身,可以链式调用
unbindPopup() → Marker
graphic/Marker.js 587
解除绑定Popup弹窗配置
返回值:
当前对象本身,可以链式调用
unbindTooltip() → Marker
graphic/Marker.js 654
解除绑定Tooltip弹窗配置
返回值:
当前对象本身,可以链式调用
定义的类型
当前类支持的EventType
事件类型(包括自定义字符串事件名)
属性:
属性名称 | 类型 | 描述信息 |
---|---|---|
move |
String | 当标记通过 setLatLng 或者 dragging时触发。旧的和新的坐标包含在事件参数中oldLatLng,latlng |
dragstart |
String | 标记开始移动时发生(因为拖动) |
movestart |
String | 当绑定到当前图层的Popup弹窗打开时触发 |
drag |
String | 当用户拖动注记时不断触发 |
dragend |
String | 当用户停止拖动注记时触发 |
moveend |
String | 当标记停止移动(由于拖动)时发出 * @property {String} add 在矢量数据添加到图层(或地图)上之后触发 |
remove |
String | 在矢量数据从图层(或地图)上移除之后触发 |
click |
String | 当用户单击(or taps)地图时触发 |
dblclick |
String | 当用户双击(or double-taps)地图时触发 |
mousedown |
String | 当用户在图层上按下鼠标按钮时触发 |
mouseover |
String | 当鼠标进入图层时触发 |
mouseout |
String | 当鼠标离开图层时触发 |
popupopen |
String | 当绑定到当前图层的Popup弹窗打开时触发 |
popupclose |
String | 当绑定到当前图层的Popup弹窗关闭时触发 |
tooltipopen |
String | 当Tooltip提示框绑定到这个图层并打开时触发 |
tooltipclose |
String | 当Tooltip提示框绑定到这个图层并关闭时触发 |
使用示例:
//绑定监听事件
marker.on('move', function (event) {
console.log('触发了事件',event)
});
参考:
图标点Marker 支持的样式信息
属性:
属性名称 | 类型 | 可选 | 默认值 | 描述信息 |
---|---|---|---|---|
image |
string | 图片URI地址 |
||
iconUrl |
string |
<可选> |
图片URI地址,同image |
|
iconRetinaUrl |
string |
<可选> |
用于Retina屏幕设备大尺寸版本的图标图像的URL |
|
opacity |
Number |
<可选> |
1.0 | 透明度,取值范围:0.0-1.0 |
width |
Number |
<可选> |
图标的宽度(以像素为单位) |
|
height |
Number |
<可选> |
图标的高度(以像素为单位) |
|
iconSize |
L.Point | Array.<Number> |
<可选> |
icon图片的大小(单位:像素),设置后width、height即失效。 |
|
rotationAngle |
Number |
<可选> |
0 | 旋转角度(度数值,0-360度),正北为0,逆时针旋转 |
horizontalOrigin |
HorizontalOrigin |
<可选> |
横向方向的定位 |
|
verticalOrigin |
VerticalOrigin |
<可选> |
垂直方向的定位 |
|
offsetX |
Number |
<可选> |
horizontalOrigin定位基础上,横向方向偏移数值 |
|
offsetY |
Number |
<可选> |
verticalOrigin定位基础上,垂直方向偏移数值 |
|
iconAnchor |
L.Point | Array.<Number> |
<可选> |
自定义图标的“指示地理位置的锚点”的坐标(相对于其左上角)。 以便图标显示准确位于标记的地理位置。 如果指定大小,则iconAnchor默认为图标中心点,也可以在带有负边距的CSS中设置。设置后horizontalOrigin、verticalOrigin即失效。 |
|
popupAnchor |
L.Point | Array.<Number> |
<可选> |
popup弹窗相对于图标的锚点“打开”的点的坐标。 |
|
tooltipAnchor |
L.Point | Array.<Number> |
<可选> |
tooltip弹窗相对于图标的锚点“打开”的点的坐标。 |
|
className |
string |
<可选> |
要分配给图标和阴影图像的自定义css类名称。 |
|
shadowUrl |
string |
<可选> |
图标阴影图像的URL。如果未指定,将不会创建阴影图像。 |
|
shadowRetinaUrl |
string |
<可选> |
用于Retina屏幕设备大尺寸版本的图标图像阴影图像的URL。如果未指定,将不会创建阴影图像。 |
|
shadowSize |
L.Point | Array.<Number> |
<可选> |
阴影部分的图片大小(单位:像素) |
|
shadowAnchor |
L.Point | Array.<Number> |
<可选> |
阴影(相对于其左上角)的“提示”的坐标(与未指定的iconAnchor相同)。 |
|
minZoom |
Number |
<可选> |
限定显示的最小的级别 |
|
maxZoom |
Number |
<可选> |
限定显示的最大的级别 |
|
draggable |
Boolean |
<可选> |
false | 标记是否可以用鼠标/触摸拖动 |
keyboard |
Boolean |
<可选> |
true | 标记是否可以用键盘按键并按回车键 |
title |
String |
<可选> |
显示在标记悬停上的浏览器Tooltip提示的文本 |
|
alt |
String |
<可选> |
alt图标图像属性的文本(对辅助功能有用) |
|
zIndexOffset |
Number |
<可选> |
0 | 默认情况下,注记图片的叠置顺序由纬度自动设置.如果你想将某一注记放置于其他之上可用这个选项,设置一个较大的值即可,比如1000(或是相反地设置一个较大的负值) |
riseOnHover |
Boolean |
<可选> |
false | 如果为true,当您将鼠标悬停在其上时,标记将会放在其他顶部。 |
riseOffset |
Number |
<可选> |
250 | 用于riseOnHover功能的z-index偏移量。 |
interactive |
Boolean |
<可选> |
true | 是否触发鼠标事件,如果false,该层不会发出鼠标事件,并且将作为底层地图的一部分。 |
magic |
String |
<可选> |
使用magic加载动画,并指定其动画样式名称 |
|
pulse |
Boolean |
<可选> |
标识当前为pulse扩散动画点 |
|
pulseColor |
Boolean |
<可选> |
"red" | pulse动画点的背景颜色 |
pulseShadowColor |
Boolean |
<可选> |
"red" | pulse动画点的shadow颜色 |
pulseDuration |
Boolean |
<可选> |
1 | pulse动画点单次动画时长(单位:秒) |
highlight |
Marker.StyleOptions |
<可选> |
【预留功能,待后续版本开发】鼠标移入或单击(type:'click')后的对应高亮的部分样式,创建Graphic后也可以openHighlight、closeHighlight方法来手动调用 |
|
label |
Label.StyleOptions |
<可选> |
支持附带文字的显示 |