qq.maps.Marker 类
继承自MVCObject类
标注表示地图上的点，可自定义标注的图标。
构造函数
| 构造函数 |
|---|
| Marker(options:MarkerOptions) |
方法
| 方法 | 返回值 | 说明 |
|---|---|---|
| getAnimation() | MarkerAnimation | 返回标注的动画效果。 |
| getClickable() | Boolean | 返回标注的可点击性。 |
| getCursor() | String | 返回标注的鼠标样式。 |
| getDraggable() | Boolean | 返回标注是否可拖拽。 |
| getFlat() | Boolean | 返回标注的阴影是否可见。 |
| getIcon() | String | MarkerImage | 返回标注的图标。 |
| getMap() | Map | 返回标注的map对象。 |
| getPosition() | LatLng | 返回标注的位置。 |
| getShadow() | String | MarkerImage | 返回标注的阴影。 |
| getShape() | MarkerShape | 返回标注的可响应区域。 |
| getTitle() | String | 返回标注的名称属性。 |
| getVisible() | Boolean | 返回标注是否可见。 |
| getZIndex() | Number | 返回标注的zIndex。 |
| getRotation() | Number | 返回marker的旋转角度 |
| getDecoration() | MarkerDecoration | 获取标注的覆盖内容 |
| setAnimation(animation:MarkerAnimation) | none | 启用一个动画，目前Marker支持反复弹跳、坠落、落下、弹起四种动画。当设置为null时，会自动终止当前动画。 |
| setClickable(clickable:Boolean) | none | 设置标注是否可点击。 |
| setCursor(cursor:String) | none | 设置鼠标经过标注时的样式。 |
| setDraggable(draggable:Boolean) | none | 设置标注是否可拖拽。 |
| setFlat(flat:Boolean) | none | 设置标注是否有阴影。 |
| setIcon(icon:String | MarkerImage) | none | 设置标注图标。 |
| setMap(map:Map) | none | 在地图对象上显示Marker，若设置为null，则从地图上移除Marker。 |
| setPosition(position:LatLng) | none | 设置标注位置。 |
| setShadow(shadow:String | MarkerImage) | none | 设置标注的阴影。 |
| setShape(shape:MarkerShape) | none | 设置标注的可响应区域。 |
| setTitle(title:String) | none | 设置标注的名称。 |
| setVisible(visible:Boolean) | none | 设置标注可见性。 |
| setZIndex(zIndex:Number) | none | 设置标注的zIndex。 |
| setRotation(rotation:Number) | none | 设置marker角度 (注：rotation属性取值范围0-360,支持IE9及以上版本) |
| setDecoration(decoration:MarkerDecoration) | none | 设置标注的覆盖内容 |
| moveTo(latlng:LatLng,speed:Number) | none | 以给定速度移动点标记到指定位置。 参数lnglat为指定位置，必设；speed为指定速度，单位：千米/小时。 |
| moveAlong(path:Array<LatLng>,speed:Number) | none | 以指定的速度，点标记沿指定的路径移动。参数path为路径坐标串；speed为指定速度，单位：千米/小时。 |
| stopMove() | none | 点标记停止动画。 |
| pauseMove() | none | 暂定点标记的动画效果。 |
| resumeMove() | none | 重新开始点标记的动画效果。 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| animation_changed | none | 当标注动画效果更改时会触发此事件。 |
| clickable_changed | none | 当标注可点性更改时会触发此事件。 |
| cursor_changed | none | 当标注鼠标样式更改时会触发此事件。 |
| draggable_changed | none | 当标注可拖拽性更改时会触发此事件。 |
| flat_changed | none | 当标注阴影是否可见更改时会触发此事件。 |
| icon_changed | none | 当标注图标更改时会触发此事件。 |
| map_changed | none | 当标注map属性更改时会触发此事件。 |
| position_changed | none | 当标注位置改变时会触发此事件。 |
| shadow_changed | none | 当标注的阴影更改时会触发此事件。 |
| shape_changed | none | 当标注可响应区域更改时会触发此事件。 |
| title_changed | none | 当标注名称属性更改时会触发此事件。 |
| visible_changed | none | 当标注可见性更改时会触发此事件。 |
| zindex_changed | none | 当标注zIndex值更改时会触发此事件。 |
| click | event:MouseEvent | 点击标注图标后会触发此事件。 |
| mousedown | event:MouseEvent | 对标注图标触发 DOM mousedown 事件时会触发此事件。 |
| mouseup | event:MouseEvent | 对标注图标触发 DOM mouseup 事件时会触发此事件。 |
| mouseover | event:MouseEvent | 当鼠标进入标注图标区域时会触发此事件。 |
| mouseout | event:MouseEvent | 当鼠标离开标注图标区域时会触发此事件。 |
| dblclick | event:MouseEvent | 当双击标注图标时会触发此事件。 |
| rightclick | event:MouseEvent | 右键点击标注时会触发此事件。 |
| dragstart | event:MouseEvent | 当用户开始拖动标注时会触发此事件。 |
| dragging | event:MouseEvent | 当用户正在拖动标注时会触发此事件。 |
| dragend | event:MouseEvent | 当用户停止拖动标注时会触发此事件。 |
| moving | event:MouseEvent | 点标记在执行moveTo，moveAlong动画时触发事件，其中passedLatlngs为Marker对象在moveAlong或者moveTo过程中已经走过的路径。 |
| moveend | none | 点标记执行moveTo，moveAlong动画结束时触发事件。 |
实例
本示例中，介绍如何设置标注的属性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>设置marker属性</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body,
button,
input,
select,
textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p {
width: 603px;
padding-top: 3px;
margin-top: 10px;
overflow: hidden;
}
.btn {
width: 112px;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body onLoad="init()">
<script>
function init() {
var center = new qq.maps.LatLng(39.982163, 116.306070);
var map = new qq.maps.Map(document.getElementById("container"), {
center: center,
zoom: 16
});
//创建一个Marker
var marker = new qq.maps.Marker({
//设置Marker的位置坐标
position: center,
//设置显示Marker的地图
map: map
});
//设置Marker的可见性，为true时可见,false时不可见，默认属性为true
marker.setVisible(true);
//设置Marker的动画属性为从落下
marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
//设置Marker是否可以被拖拽，为true时可拖拽，false时不可拖拽，默认属性为false
marker.setDraggable(true);
////设置Marker自定义图标的属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc/img/nilt.png",
size,
origin,
anchor
);
marker.setIcon(icon);
//设置Marker阴影图片属性，size是图标尺寸，该尺寸为显示图标的实际尺寸，origin是切图坐标，该坐标是相对于图片左上角默认为（0,0）的相对像素坐标，anchor是锚点坐标，描述经纬度点对应图标中的位置
var anchorb = new qq.maps.Point(3, -30),
sizeb = new qq.maps.Size(42, 11),
origin = new qq.maps.Point(0, 0),
iconb = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc/img/nilb.png",
sizeb,
origin,
anchorb
);
marker.setShadow(iconb);
//设置标注的名称，当鼠标划过Marker时显示
marker.setTitle("测试");
//添加信息窗口
var info = new qq.maps.InfoWindow({
map: map
});
//获取标记的可拖动属性
info.open();
info.setContent('标记的可拖动属性为：' + marker.getDraggable());
info.setPosition(marker.getPosition());
//标记Marker点击事件
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;' +
'margin:10px;">单击标记</div>');
info.setPosition(marker.getPosition());
});
//设置Marker停止拖动事件
qq.maps.event.addListener(marker, 'dragend', function() {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;' +
'margin:10px;">拖动标记</div>');
//getPosition() 返回Marker的位置
info.setPosition(marker.getPosition());
});
}
</script>
<div style="width:603px;height:300px" id="container"></div>
<p>Marker可以拖动，点击时弹出单击信息窗口，拖动Marker时弹出拖动信息窗口</p>
</body>
</html>
这篇文档对您是否有帮助？
有帮助
没帮助