Class:覆盖物/MultiMarker

MultiMarker

表示地图上的多个标注点，可自定义标注的图标。

构造函数

构造函数
`TMap.MultiMarker(options:MarkerOptions)`

方法

方法	返回值	说明
`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: PointGeometryPointGeometry[])`	`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,只在桌面浏览器中触发/td>
`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动画由暂停到恢复时触发事件。

实例

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

JavaScript

var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
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"
        }
    }]
});

JavaScript+HTML

<!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>

新窗口打开在线试一试