MultiMarker
表示地图上的多个标注点，可自定义标注的图标。
| 构造函数 |
|---|
| TMap.MultiMarker(options:MultiMarkerOptions) |
| 方法 | 返回值 | 说明 |
|---|---|---|
| setMap(map:Map) | this | 设置地图对象，如果map为null意味着将多个标注点同时从地图中移除。 |
| setGeometries(geometries: PointGeometry[]) | this | 更新标注点数据，如果参数为null或undefined不会做任何处理。 |
| setStyles(styles:MultiMarkerStyleHash) | this | 设置MultiMarker图层相关样式信息，如果参数为null或undefined不会做任何处理。 |
| setVisible(visible: Boolean) | this | 设置图层是否可见。 |
| setInteractiveDisable(disableInteractive: Boolean) | this | 设置图层是否禁止参与交互事件 |
| setStopPropagation(isStopPropagation: Boolean) | this | 设置当前覆盖物事件响应禁止冒泡至Map |
| getMap() | Map | 获取地图对象，若为空返回null。 |
| getGeometries() | PointGeometry[] | 获取点数据。 |
| getStyles() | MultiMarkerStyleHash | 获取图层相关样式信息。 |
| getVisible() | visible | 获取可见状态。 |
| getGeometryById(id:String) | PointGeometry | 根据点数据id来获取点数据。 |
| getInteractiveDisable() | Boolean | 获取图层是否禁止参与交互事件的状态 |
| getStopPropagation() | Boolean | 获取当前覆盖物禁止冒泡状态 |
| updateGeometries(geometry:PointGeometry[]) | this | 更新标注点数据，如果geometry的id存在于多点标注的集合中，会更新对id的数据，如果之前不存在于集合中，会作为新的点标注添加到集合中；如果参数为null或undefined不会做任何处理。 |
| add(geometries: PointGeometry PointGeometry[]) | this | 向图层中添加标注点，如果geometry的id已经存在集合中，则该geometry不会被重复添加，如果geometry没有id或者id不存在于集合中会被添加到集合，没有id的geometry会被赋予一个唯一id；如果要添加到集合中的标注存在重复id，这些标注点会被重新分配id；如果参数为null或undefined不会做任何处理。 |
| remove(ids: String[]) | this | 移除指定id的标注点，如果参数为null或undefined不会做任何处理。 |
| moveAlong(param: MoveAlongParamSet, options:Object) | this | 指定id的标注点，沿着指定路径移动;每次新调用moveAlong时，尚未完成的动画会被取消，并触发move_stopped事件;options中如果设置autoRotation为true，对于faceTo为’map’的点标记，会根据路径方向自动改变点标记图片的旋转角度。 |
| stopMove() | this | 停止移动，尚未完成的动画会被取消，并触发move_stopped事件；已经完成的动画不会触发move_stopped事件。 |
| pauseMove() | this | 暂停点标记的动画效果，并触发move_paused事件;未在移动状态不会触发move_paused事件。 |
| resumeMove() | this | 重新开始点标记的动画效果，并触发move_resumed事件;未在暂停状态不会触发move_resumed事件。 |
| on(eventName:String, listener:Function) | this | 添加listener到eventName事件的监听器数组中。 |
| off(eventName:String, listener:Function) | this | 从eventName事件的监听器数组中移除指定的listener。 |
事件： 监听事件通过on、off方法绑定与解绑。查看示例
| 事件名 | 参数 | 说明 |
|---|---|---|
| click | GeometryOverlayEvent | 点击事件。 |
| dblclick | GeometryOverlayEvent | 双击事件。 |
| mousedown | GeometryOverlayEvent | 鼠标在地图区域中左键按下时触发，只在桌面浏览器中触发。 |
| mouseup | GeometryOverlayEvent | 鼠标在地图区域中左键按下又弹起时触发，只在桌面浏览器中触发。 |
| mousemove | GeometryOverlayEvent | 鼠标在地图上移动时触发，只在桌面浏览器中触发。 |
| hover | GeometryOverlayEvent | 鼠标在图层上悬停对象改变时触发，事件对象中的geometry属性会指向交互位置所在图形的PointGeometry，无图形时事件对象为null,只在桌面浏览器中触发。 |
| touchstart | GeometryOverlayEvent | 在地图区域触摸开始时触发，只在移动浏览器中触发。 |
| touchmove | GeometryOverlayEvent | 在地图区域触摸移动时触发，只在移动浏览器中触发。 |
| touchend | GeometryOverlayEvent | 在地图区域触摸结束时触发，只在移动浏览器中触发。 |
| moving | Object | 点标记在执行moveAlong动画时触发事件，事件参数为一个key-value形式对象, key代表MultiMarker点数据集合中的PointGeometry的id，value是一个 MarkerMovingEventItem 对象。 |
| move_ended | none | 点标记执行moveAlong动画结束时触发事件。 |
| move_stopped | none | 点标记执行moveAlong动画被停止时触发事件。 |
| move_paused | none | 点标记执行moveAlong动画被暂停时触发事件。 |
| move_resumed | none | 点标记执行moveAlong动画由暂停到恢复时触发事件。 |
| geometry_processed | 由增删改引起的几何数据变更被处理完成后触发。（注意：1、该事件仅代表数据处理完成，不代表数据被渲染完成，通常数据处理完后20~50ms内可被渲染；2、当该实例对象被编辑器激活进行编辑前，需要开发者手动阻止该事件监听函数中的业务逻辑执行，在编辑完成后可正常执行事件监听函数的业务逻辑） |
示例： 本示例中，介绍如何设置标注的属性
<!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">
html,
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 100%;
}
</style>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
</head>
<body onLoad="initMap()">
<script>
//初始化地图
var map = new TMap.Map("container", {
center: center
});
//初始化marker
var marker = new TMap.MultiMarker({
id: "marker-layer", //图层id
map: map,
styles: { //点标注的相关样式
"marker": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": "img/marker.png"
})
},
geometries: [{ //点标注数据数组
"id": "demo",
"styleId": "marker",
"position": new TMap.LatLng(39.984104, 116.307503),
"properties": {
"title": "marker"
}
}]
});
</body>
</html>
MultiMarkerOptions
MultiMarker的配置参数。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| id | String | 图层id，若没有会自动分配一个。 |
| map | Map | 显示Marker图层的底图。 |
| zIndex | Number | 图层绘制顺序。 |
| styles | MultiMarkerStyleHash | 点标注的相关样式。 |
| collisionOptions | CollisionOptions | 图层碰撞配置参数。 |
| geometries | PointGeometry[] | 点标注数据数组。 |
| minZoom | Number | 最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3 |
| maxZoom | Number | 最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20 |
| disableInteractive | Boolean | 图层是否禁止参与交互事件，默认为false |
| isStopPropagation | Boolean | 是否阻止鼠标、触摸事件冒泡，默认为false |
CollisionOptions
图层碰撞配置参数。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| sameSource | Boolean | 是否开启同图层内碰撞，如开启，碰撞优先级按rank值进行碰撞，rank值越大，碰撞权重越高，默认为false |
| crossSource | Boolean | 是否开启跨图层间碰撞，所有开启跨图层间进行碰撞，优先级按zIndex值进行碰撞，zIndex值越大，碰撞权重越高，默认为false |
| vectorBaseMapSource | Boolean | 是否允许碰撞地图元素，开启后图层优先级高于地图元素优先级，默认为false |
MultiMarkerStyleHash
一个key-value形式对象, 表示Marker图层的相关样式信息，key使用字符串，value是 MarkerStyle 对象。
MarkerStyle
应用于Marker图层的样式类型。
| 构造函数 |
|---|
| TMap.MarkerStyle(options:MarkerStyleOptions) |
MarkerStyleOptions
MarkerStyle配置参数。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| width | Number | 必需，标注点图片的宽度，默认为34 |
| height | Number | 必需，标注点图片的高度，默认为50 |
| anchor | Object | 标注点图片的锚点位置，对象字面量{x:Number, y:Number}形式，在地图各种操作中，锚点的位置与标注位置点是永远对应的；若没有锚点默认为{ x: width/2, y: height }；锚点以图片左上角点为原点 |
| src | String | 标注点图片url或base64地址，若为url地址图片一定要在服务器端配置允许跨域 |
| faceTo | String | 标注点图片的朝向，可取’map’（贴地）或’screen’（直立），默认为’screen’。 |
| enableRelativeScale | Boolean | 是否启动随地图放大缩小，默认为false（只针对非碰撞Marker生效） |
| relativeScaleOptions | RelativeScaleOptions | Marker的图像、文本随地图放大缩小的控制参数（只针对非碰撞Marker生效） |
| rotate | Number | 标注点图片的旋转角度，单位为度，非负数；以锚点为旋转原点，逆时针为正。 |
| opacity | Number | 标注点图片的透明度，取值0-1。 |
| color | String | 标注点文本颜色属性，支持rgb()，rgba()，#RRGGBB等形式，默认为rgba(0,0,0,1) 。 |
| strokeColor | String | 标注点文本描边颜色属性，支持rgb()，rgba()，#RRGGBB等形式，默认为rgba(0,0,0,0)。 |
| strokeWidth | Number | 标注点文本描边宽度，默认为1。 |
| size | Number | 标注点文本文字大小属性，默认为14。 |
| direction | String | 标注点文本文字相对于标注点图片的方位，可选位于标注点图片的center，top，bottom，left，right方位，默认位于图片的中心center 。 |
| offset | Object: {x:Number, y:Number} |
标注点文本文字基于direction方位的偏移量，单位为像素，以文本文字中心为原点，x轴向右为正向左为负，y轴向下为正向上为负，默认为{x:0, y:0} 。 |
| wrapOptions | LabelWrapOptions | 标注点文本自动换行，支持设置软换行和硬换行，软换行支持配置最大换行宽度，硬换行换行符为’\n’。 LabelWrapOptions如果为空对象则以文本中换行符进行换行，如果为null或undefined则不换行 |
| padding | String | 标注点文字背景框内边距，单位为像素，属性支持接受1～2个值，规则符合css规范。例：“15px” 上下左右内边距为15px例：“15px 20px” 上下内边距为15px，左右内边距为20px注意设置背景宽高后padding将不生效 |
| backgroundWidth | Number | 标注点文本背景的宽度，单位为像素，默认为0 |
| backgroundHeight | Number | 标注点文本背景的高度，单位为像素，默认为0 |
| backgroundColor | String | 标注点文本背景颜色属性，支持rgb()，rgba()，#RRGGBB等形式，该属性生效需要设置padding 或 backgroundWidth和backgroundHeight，默认为rgba(0,0,0,1) |
| backgroundBorderWidth | Number | 标注点文字背景框边线宽度，单位为像素；该属性生效需要设置padding 或 backgroundWidth和backgroundHeight，默认为0 |
| backgroundBorderRadius | Number | 标注点文本背景框圆角，单位为像素；该属性生效需要设置padding 或 backgroundWidth和backgroundHeight，默认为0 |
| backgroundBorderColor | String | 标注点文本背景描边颜色属性，支持rgb()，rgba()，#RRGGBB等形式，该属性生效需要设置padding 或 backgroundWidth和backgroundHeight，默认为rgba(0,0,0,0) |
PointGeometry
点图形数据。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| id | String | 点图形数据的标志信息，不可重复，若id重复后面的id会被重新分配一个新id，若没有会随机生成一个。 |
| styleId | String | 对应MultiMarkerStyleHash中的样式id, 如果样式表中没有包含geometry指定的styleId，则该geometry会以默认样式绘制。 |
| position | LatLng | 标注点位置。 |
| rank | Number | 标注点的图层内绘制顺序。 |
| properties | Object | 标注点的属性数据。 |
| content | String | 标注点文本，默认为undefined，即无标注点文本绘制效果 |
| markerAnimation | MarkerAnimation | 标注点入场和离场动画设置 |
MoveAlongParamSet
MultiMarker的moveAlong方法的参数对象。一个key-value形式对象, keyMultiMarker点数据集合中的PointGeometry的id，value是 MoveAlongParam 对象。
MoveAlongParam
| 属性名称 | 类型 | 说明 |
|---|---|---|
| path | LatLng[] | 移动路径的坐标串 |
| duration | Number | 完成移动所需的时间，单位：毫秒 （同时指定duration和speed，duration优先级高） |
| speed | Number | speed为指定速度，正整数，单位：千米/小时 |
MarkerMovingEventItem
点标记沿线移动时返回的信息。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| passedLatLngs | LatLng[] | marker所走过的路径坐标串 |
| angle | Number | 自动旋转情况下，当前点的旋转角度(只对faceTo为’Map’的点标记有效) |
MarkerAnimation 对象规范
| 名称 | 类型 | 说明 |
|---|---|---|
| enter | MarkerAnimationParams | 入场动画 |
| leave | MarkerAnimationParams | 离场动画 |
MarkerAnimationParams 对象规范
| 名称 | 类型 | 说明 |
|---|---|---|
| scaleStart | Number | scale动画起始值，默认为1.0 |
| scaleEnd | Number | scale动画终止值，默认为1.0 |
| alphaStart | Number | alpha动画起始值，默认为1.0 |
| alphaEnd | Number | alpha动画终止值，默认为1.0 |
| duration | Number | 动画时长，同时作用于scale动画和alpha动画，默认为500，单位为毫秒 |
LabelWrapOptions
文本换行配置。当同时指定了最大换行宽度、最大行数和换行符时，换行优先级为: 最大行数>换行符>最大换行宽度。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| maxWidth | Number | 最大换行宽度，单位是像素，默认不限制 |
| maxLineCount | Number | 最大行数，默认不限制 |
| rowSpacing | Number | 行间距，单位是像素，默认为0 |
RelativeScaleOptions
Marker的图像、文本随地图放大缩小的控制参数。
| 属性名称 | 类型 | 说明 |
|---|---|---|
| scaleZoom | Number | 设置marker图片宽高像素单位与zoom级别的瓦片像素相同，如当设置为18时，zoom小于18marker会被缩小直至达到minScale设置的最小缩放倍数，大于时marker直至达到maxScale设置的最大缩放倍数；enableRelativeScale为true时生效，默认18 |
| minScale | Number | 设置最小的缩放比例，范围 [0, 1)，默认为0.5 |
| maxScale | Number | 设置最大的缩放比例，范围 [1, 10)， 默认为1 |
试试AI总结
不想看文档？直接问AI～
这篇文档对您是否有帮助？
有帮助
没帮助
本页内容