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 点标注的相关样式。
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’。
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。
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

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

已解决
未解决