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': '腾讯北京总部', //标注文本 }] }); 查看示例