JavaScript API | 腾讯位置服务

JavaScript API GL

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	设置图层是否可见。
getMap()	Map	获取地图对象，若为空返回null。
getGeometries()	PointGeometry[]	获取点数据。
getStyles()	MultiMarkerStyleHash	获取图层相关样式信息。
getVisible()	visible	获取可见状态。
getGeometryById(id:String)	PointGeometry	根据点数据id来获取点数据。
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。

事件名	参数	说明
click	GeometryOverlayEvent	点击事件。
dblclick	GeometryOverlayEvent	双击事件。
mousedown	GeometryOverlayEvent	鼠标在地图区域中左键按下时触发，只在桌面浏览器中触发。
mouseup	GeometryOverlayEvent	鼠标在地图区域中左键按下又弹起时触发，只在桌面浏览器中触发。
mousemove	GeometryOverlayEvent	鼠标在地图上移动时触发，只在桌面浏览器中触发。
hover	GeometryOverlayEvent	鼠标在图层上悬停对象改变时触发，事件对象中的geometry属性会指向交互位置所在图形的LabelGeometry，无图形时事件对象为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动画由暂停到恢复时触发事件。

示例：
本示例中，介绍如何设置标注的属性

<!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	点标注的相关样式。
enableCollision	Boolean	是否开启图层内部的marker标注碰撞。
collisionOptions	CollisionOptions	图层碰撞配置参数。
geometries	PointGeometry[]	点标注数据数组。
minZoom	Number	最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3
maxZoom	Number	最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20

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’。
rotate	Number	标注点图片的旋转角度，单位为度，非负数；以锚点为旋转原点，逆时针为正。
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则不换行

PointGeometry

点图形数据。

属性名称	类型	说明
id	String	点图形数据的标志信息，不可重复，若id重复后面的id会被重新分配一个新id，若没有会随机生成一个。
styleId	String	对应MultiMarkerStyleHash中的样式id。
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

这篇文章对您解决问题是否有帮助？

已解决

未解决