MultiMarker（点标记）介绍

MultiMarker 用于实现在地图中的点标注功能，可以根据用户设置的样式同时标注多个位置。
与一般的每个点标记为一个对象实例不同，MultiMarker 是以图层的方式、批量管理多个点标记的形式使用的。

MultiMarker 初始化定义分为三个部分：
1.地图容器设置（map）：地图API支持在同一页面创建多个地图实例，该参数用来指定点标记显示在哪张地图上
2.marker样式设置（styles）：可定义多个样式，每个样式有一个样式id
3.marker点标记数据数组（geometries）：数组每一项为一个点标记，点标记数据包括该点坐标、样式id以及自定义的数据属性

var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
//初始化地图
var map = new TMap.Map(container, {
    center: center
});
 
//创建并初始化MultiMarker
var markerLayer = new TMap.MultiMarker({
    map: map,  //指定地图容器
    //样式定义
    styles: {
        //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
        "myStyle": new TMap.MarkerStyle({ 
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            "src": '../img/marker.png',  //图片路径
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }  
        }) 
    },
    //点标记数据数组
    geometries: [{
        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'myStyle',  //指定样式id
        "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
        "properties": {//自定义属性
            "title": "marker1"
        }
    }, {//第二个点标记
        "id": "2",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.994104, 116.287503),
        "properties": {
            "title": "marker2"
        }
    }
    ]
});

查看示例

添加点标记：

MultiMarker提供了add(geometries: PointGeometry[])方法用于在点标记图层中新增标记，且支持一次添加多个

markerLayer.add([{
    "id": "3",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
    "styleId": 'myStyle',  //指定样式id
    "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
    "properties": {//自定义属性
        "title": "marker3"
        }
    }, {//第4个点标记
        "id": "4",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.994104, 116.287503),
        "properties": {
            "title": "marker4"
        }
    }
])

查看示例

修改点标记：

修改某标记的坐标位置： MultiMarker 提供了updateGeometries方法用于更新点标记图层的数据，以点标记唯一标识id为依据，如果geometry的id存在于多点标注的集合中，会更新对id的数据，如果之前不存在于集合中，会作为新的点标注添加到集合中；

//修改id为4的点标记的位置
markerLayer.updateGeometries([
    {
     "styleId":"marker",
     "id": "4",
     "position": new TMap.LatLng(39.994104, 116.287503),
    }
])

点标记删除

清空点标记： MultiMarker提供了setGeometries方法用于更新点标记图层的数据，而传入空数组即为清空

markerLayer.setGeometries([])

删除指定标记： MultiMarker提供了remove方法用限删除指定id的点标记

markerLayer.remove(["1","4"])

点标记-点击事件

MultiMarker通过on(eventName:String,listener:Function)方法，为点标记图层绑定点击事件，参数eventName为事件名称，listener为事件的处理方法。 以下示例，演示了点击某标记后，弹出其自定义属性“title”的内容。

//监听回调函数（非匿名函数）
var clickHandler = function (evt) {
       alert(evt.geometry.properties.title)
}
//监听marker点击事件
marker.on("click", clickHandler)
 
//解绑点击事件，要求事件处理方法不能是匿名方法
function eventOff(){
    marker.off("click", clickHandler)
}

在html中添加解绑事件按钮

<a href="javascript:eventOff()">解绑点击事件</a>

MultiLabel（文本标记）介绍

MultiLabel 可实现在地图中指定位置标记一串文字。
与MultiMarker一样，也是以图层的方式、批量管理多个文本标记的形式使用的。

实例代码讲解（几个关键类请参考：样式LabelStyle，数据定义LabelGeometry）：

var center = new TMap.LatLng(40.040074, 116.273519);//设置中心点坐标
//初始化地图
var map = new TMap.Map('mapContainer', {
    center: center,
    zoom: 18
});
//初始化label
var label = new TMap.MultiLabel({
    id: 'label-layer',
    map: map, //设置折线图层显示到哪个地图实例中
    //文字标记样式
    styles: {
        'label': new TMap.LabelStyle({
            'color': '#3777FF', //颜色属性
            'size': 20, //文字大小属性
            'offset': { x: 0, y: 0 }, //文字偏移属性单位为像素
            'angle': 0, //文字旋转属性
            'alignment': 'center', //文字水平对齐属性
            'verticalAlignment': 'middle' //文字垂直对齐属性
        })
    },
    //文字标记数据
    geometries: [{
        'id': 'label_1', //点图形数据的标志信息
        'styleId': 'label', //样式id
        'position': center, //标注点位置
        'content': '腾讯北京总部', //标注文本
    }]
});

查看示例